Merge pull request #15773 from SoyDiego/15736-fix-button

fix(Button): The icon is not shown
primefaces · Jun 13, 2024 · e4b7c69 · e4b7c69
2 parents 0389df3 + 45141f4
commit e4b7c69
Show file tree

Hide file tree

Showing 2 changed files with 40 additions and 6 deletions.
diff --git a/src/app/components/button/button.ts b/src/app/components/button/button.ts
@@ -300,10 +300,17 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
         let iconElement = DomHandler.findSingle(this.htmlElement, '.p-button-icon');
         let labelElement = DomHandler.findSingle(this.htmlElement, '.p-button-label');
 
-        if (this.loading && !this.loadingIcon && iconElement) {
-            iconElement.innerHTML = this.spinnerIcon;
-        } else if (iconElement?.innerHTML) {
+        if (this.loading) {
+            if (!this.loadingIcon && iconElement) {
+                iconElement.innerHTML = this.spinnerIcon;
+            } else if (this.loadingIcon && iconElement) {
+                iconElement.className = `p-button-icon ${this.loadingIcon}`;
+            }
+        } else if (this.icon && iconElement) {
+            iconElement.className = `p-button-icon ${this.icon}`;
+        } else if (iconElement) {
             iconElement.innerHTML = '';
+            this.createIcon();
         }
 
         if (iconElement) {
@@ -360,7 +367,7 @@ export class ButtonDirective implements AfterViewInit, OnDestroy {
                 <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'"></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>
@@ -523,14 +530,21 @@ export class Button implements AfterContentInit {
     }
 
     iconClass() {
-        return {
-            [`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`]: this.loading,
+        const iconClasses = {
             'p-button-icon': true,
             'p-button-icon-left': this.iconPos === 'left' && this.label,
             'p-button-icon-right': this.iconPos === 'right' && this.label,
             'p-button-icon-top': this.iconPos === 'top' && this.label,
             'p-button-icon-bottom': this.iconPos === 'bottom' && this.label
         };
+
+        if (this.loading) {
+            iconClasses[`p-button-loading-icon pi-spin ${this.loadingIcon ?? ''}`] = true;
+        } else if (this.icon) {
+            iconClasses[this.icon] = true;
+        }
+
+        return iconClasses;
     }
 
     get buttonClass() {

diff --git a/src/app/showcase/doc/apidoc/index.json b/src/app/showcase/doc/apidoc/index.json
@@ -22310,6 +22310,26 @@
                             ],
                             "description": "Callback to invoke when default command button is clicked."
                         },
+                        {
+                            "name": "onMenuHide",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "type": "any"
+                                }
+                            ],
+                            "description": "Callback to invoke when overlay menu is hidden."
+                        },
+                        {
+                            "name": "onMenuShow",
+                            "parameters": [
+                                {
+                                    "name": "value",
+                                    "type": "any"
+                                }
+                            ],
+                            "description": "Callback to invoke when overlay menu is shown."
+                        },
                         {
                             "name": "onDropdownClick",
                             "parameters": [