diff --git a/src/app/components/button/button.interface.ts b/src/app/components/button/button.interface.ts
index 3d2d5dcda70..6002d5a0b4f 100644
--- a/src/app/components/button/button.interface.ts
+++ b/src/app/components/button/button.interface.ts
@@ -1,3 +1,4 @@
+import { NgClass } from '@angular/common';
 import { TemplateRef } from '@angular/core';
 
 /**
@@ -12,9 +13,19 @@ export interface ButtonTemplates {
     /**
      * Custom template of icon.
      */
-    icon(): TemplateRef<any>;
+    icon(context: {
+        /**
+         * Icon class.
+         */
+        class: NgClass;
+    }): TemplateRef<NgClass>;
     /**
      * Custom template of loadingicon.
      */
-    loadingicon(): TemplateRef<any>;
+    loadingicon(context: {
+        /**
+         * Icon class.
+         */
+        class: NgClass;
+    }): TemplateRef<NgClass>;
 }
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
index 9a2ec2cd700..c8d8e45256b 100755
--- a/src/app/components/button/button.ts
+++ b/src/app/components/button/button.ts
@@ -350,18 +350,14 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
             <ng-container *ngTemplateOutlet="contentTemplate"></ng-container>
             <ng-container *ngIf="loading">
                 <ng-container *ngIf="!loadingIconTemplate">
-                    <span *ngIf="loadingIcon" [class]="'p-button-loading-icon pi-spin ' + loadingIcon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
+                    <span *ngIf="loadingIcon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'"></span>
                     <SpinnerIcon *ngIf="!loadingIcon" [styleClass]="spinnerIconClass()" [spin]="true" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'" />
                 </ng-container>
-                <span *ngIf="loadingIconTemplate" class="p-button-loading-icon" [ngClass]="iconClass()" [attr.aria-hidden]="true" [attr.data-pc-section]="'loadingicon'">
-                    <ng-template *ngTemplateOutlet="loadingIconTemplate"></ng-template>
-                </span>
+                <ng-template [ngIf]="loadingIconTemplate" *ngTemplateOutlet="loadingIconTemplate; context: { class: iconClass() }"></ng-template>
             </ng-container>
             <ng-container *ngIf="!loading">
                 <span *ngIf="icon && !iconTemplate" [class]="icon" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'"></span>
-                <span *ngIf="!icon && iconTemplate" [ngClass]="iconClass()" [attr.data-pc-section]="'icon'">
-                    <ng-template [ngIf]="!icon" *ngTemplateOutlet="iconTemplate"></ng-template>
-                </span>
+                <ng-template [ngIf]="!icon && iconTemplate" *ngTemplateOutlet="iconTemplate; context: { class: iconClass() }"></ng-template>
             </ng-container>
             <span class="p-button-label" [attr.aria-hidden]="icon && !label" *ngIf="!contentTemplate && label" [attr.data-pc-section]="'label'">{{ label }}</span>
             <span [ngClass]="badgeStyleClass()" [class]="badgeClass" *ngIf="!contentTemplate && badge" [attr.data-pc-section]="'badge'">{{ badge }}</span>
@@ -525,6 +521,7 @@ export class Button implements AfterContentInit {
 
     iconClass() {
         return {
+            [`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`]: this.loading,
             'p-button-icon': true,
             'p-button-icon-left': this.iconPos === 'left' && this.label,
             'p-button-icon-right': this.iconPos === 'right' && this.label,