Fixed #2911 - New iconClass property for Button component

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",

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.
      */

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,

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>