From 15620770ffc3dc94bc36bc816e82c8c7aa8957de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=87etin?=
 <69278826+cetincakiroglu@users.noreply.github.com>
Date: Wed, 15 May 2024 17:48:25 +0300
Subject: [PATCH] Fixes #15582 - Button | Remove wrapper span element from icon
 templates

---
 src/app/components/button/button.interface.ts | 15 +++++++++++++--
 src/app/components/button/button.ts           | 11 ++++-------
 2 files changed, 17 insertions(+), 9 deletions(-)

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,