From 400cabe01fc083017a0feadb43c3e5627f31f828 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Tu=C4=9F=C3=A7e=20K=C3=BC=C3=A7=C3=BCko=C4=9Flu?=
 <tugcekucukoglu.860@gmail.com>
Date: Wed, 31 Aug 2022 11:42:27 +0300
Subject: [PATCH] Fixed #2911 - New iconClass property for Button component

---
 api-generator/components/button.js |  6 ++++++
 src/components/button/Button.d.ts  |  4 ++++
 src/components/button/Button.vue   | 12 ++++++++----
 src/views/button/ButtonDoc.vue     |  6 ++++++
 4 files changed, 24 insertions(+), 4 deletions(-)

diff --git a/api-generator/components/button.js b/api-generator/components/button.js
index 76098a6ad..167aa9bbf 100644
--- a/api-generator/components/button.js
+++ b/api-generator/components/button.js
@@ -17,6 +17,12 @@ const ButtonProps = [
         default: "left",
         description: 'Position of the icon, valid values are "left", "right", "bottom" and "top".'
     },
+    {
+        name: "iconClass",
+        type: "string",
+        default: "null",
+        description: "Style class of the icon."
+    },
     {
         name: "badge",
         type: "string",
diff --git a/src/components/button/Button.d.ts b/src/components/button/Button.d.ts
index 992b4c166..f9d6669aa 100755
--- a/src/components/button/Button.d.ts
+++ b/src/components/button/Button.d.ts
@@ -25,6 +25,10 @@ export interface ButtonProps extends ButtonHTMLAttributes {
      * Default value is 'left'.
      */
     iconPos?: ButtonIconPosType;
+    /**
+     * Style class of the icon.
+     */
+    iconClass?: string | undefined;
     /**
      * Value of the badge.
      */
diff --git a/src/components/button/Button.vue b/src/components/button/Button.vue
index cfa39fe8a..bf825e5fe 100755
--- a/src/components/button/Button.vue
+++ b/src/components/button/Button.vue
@@ -1,8 +1,8 @@
 <template>
     <button :class="buttonClass" type="button" :aria-label="defaultAriaLabel" v-ripple :disabled="disabled">
         <slot>
-            <span v-if="loading && !icon" :class="iconClass"></span>
-            <span v-if="icon" :class="iconClass"></span>
+            <span v-if="loading && !icon" :class="iconStyleClass"></span>
+            <span v-if="icon" :class="iconStyleClass"></span>
             <span class="p-button-label">{{label||'&nbsp;'}}</span>
             <span v-if="badge" :class="badgeStyleClass">{{badge}}</span>
         </slot>
@@ -25,6 +25,10 @@ export default {
             type: String,
             default: 'left'
         },
+        iconClass: {
+            type: String,
+            default: null
+        },
         badge: {
             type: String
         },
@@ -52,10 +56,10 @@ export default {
                 'p-button-loading-label-only': this.loading && !this.icon && this.label
             }
         },
-        iconClass() {
+        iconStyleClass() {
             return [
                 this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
-                'p-button-icon',
+                'p-button-icon', this.iconClass,
                 {
                     'p-button-icon-left': this.iconPos === 'left' && this.label,
                     'p-button-icon-right': this.iconPos === 'right' && this.label,
diff --git a/src/views/button/ButtonDoc.vue b/src/views/button/ButtonDoc.vue
index 4e6a3cc64..a2580ea6a 100755
--- a/src/views/button/ButtonDoc.vue
+++ b/src/views/button/ButtonDoc.vue
@@ -177,6 +177,12 @@ import Button from 'primevue/button';
                         <td>left</td>
                         <td>Position of the icon, valid values are "left", "right", "bottom" and "top".</td>
                     </tr>
+                    <tr>
+                        <td>iconClass</td>
+                        <td>string</td>
+                        <td>null</td>
+                        <td>Style class of the icon.</td>
+                    </tr>
                     <tr>
                         <td>badge</td>
                         <td>string</td>