diff --git a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
index be68f110a4..ca997330a8 100644
--- a/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
+++ b/src/Umbraco.Web.UI.Client/src/views/components/buttons/umb-button.html
@@ -1,8 +1,8 @@
 <div class="umb-button" ng-class="{'ml0': vm.generalActions, 'umb-button--block': vm.blockElement}" data-element="{{ vm.alias ? 'button-' + vm.alias : '' }}">
 
     <div ng-if="vm.innerState">
-        <div class="icon-check umb-button__success" ng-class="{'-hidden': vm.innerState !== 'success', '-white': vm.isPrimaryButtonStyle}"></div>
-        <div class="icon-delete umb-button__error" ng-class="{'-hidden': vm.innerState !== 'error', '-white': vm.isPrimaryButtonStyle}"></div>
+        <umb-icon icon="icon-check" class="icon-check umb-button__success" ng-class="{'-hidden': vm.innerState !== 'success', '-white': vm.isPrimaryButtonStyle}"></umb-icon>
+        <umb-icon icon="icon-delete" class="icon-delete umb-button__error" ng-class="{'-hidden': vm.innerState !== 'error', '-white': vm.isPrimaryButtonStyle}"></umb-icon>
         <div class="umb-button__progress" ng-class="{'-hidden': vm.innerState !== 'busy', '-white': vm.isPrimaryButtonStyle}"></div>
         <div ng-if="vm.innerState !== 'init'" class="umb-button__overlay"></div>
     </div>
@@ -14,7 +14,7 @@
         hotkey="{{vm.shortcut}}"
         hotkey-when-hidden="{{vm.shortcutWhenHidden}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
-            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
+            <umb-icon icon="{{vm.icon}}" class="{{vm.icon}} umb-button__icon" ng-if="vm.icon"></umb-icon>
             {{vm.buttonLabel}}
             <span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
         </span>
@@ -30,10 +30,9 @@
         ng-disabled="vm.disabled"
         umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}"
         aria-haspopup="{{vm.hasPopup}}"
-        aria-expanded="{{vm.isExpanded}}"
-        >
+        aria-expanded="{{vm.isExpanded}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
-            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
+            <umb-icon icon="{{vm.icon}}" class="{{vm.icon}} umb-button__icon" ng-if="vm.icon"></umb-icon>
             {{vm.buttonLabel}}
             <span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
         </span>
@@ -48,11 +47,10 @@
         ng-disabled="vm.disabled"
         umb-auto-focus="{{vm.autoFocus && !vm.disabled ? 'true' : 'false'}}">
         <span class="umb-button__content" ng-class="{'-hidden': vm.innerState !== 'init'}">
-            <i ng-if="vm.icon" class="{{vm.icon}} umb-button__icon" aria-hidden="true"></i>
+            <umb-icon icon="{{vm.icon}}" class="{{vm.icon}} umb-button__icon" ng-if="vm.icon"></umb-icon>
             {{vm.buttonLabel}}
             <span ng-if="vm.showCaret" class="umb-button__caret caret" aria-hidden="true"></span>
         </span>
     </button>
 
-
 </div>