diff --git a/src/main/app/templates/_toolbar.html b/src/main/app/templates/_toolbar.html
index e316c269..e276f709 100644
--- a/src/main/app/templates/_toolbar.html
+++ b/src/main/app/templates/_toolbar.html
@@ -73,7 +73,9 @@
 							ng-class="{'icon-arrow-up' : settingsService.settings.readingOrder == 'asc', 'icon-arrow-down': settingsService.settings.readingOrder != 'asc'}"></i>
 					</a>
 					<button type="button" class="btn btn-default" ng-click="toggleAbcOrder()" title="{{ 'toolbar.sort_by_abc_zyx' | translate }}"
-						ng-class="{'active' : settingsService.settings.readingOrder == 'abc' || settingsService.settings.readingOrder == 'zyx'}">{{ ((settingsService.settings.readingOrder == 'abc' || settingsService.settings.readingOrder == 'zyx') ? settingsService.settings.readingOrder.toUpperCase() : "ABC") }}
+						ng-class="{'active' : settingsService.settings.readingOrder == 'abc' || settingsService.settings.readingOrder == 'zyx'}">
+						<i
+							ng-class="{'icon-sort-by-alphabet' : settingsService.settings.readingOrder != 'zyx', 'icon-sort-by-alphabet-alt': settingsService.settings.readingOrder == 'zyx'}"></i>
 					</button>
 				</div>