diff --git a/api-generator/components/button.js b/api-generator/components/button.js
index 359c3d45e..cc17ea7d3 100644
--- a/api-generator/components/button.js
+++ b/api-generator/components/button.js
@@ -97,10 +97,25 @@ const ButtonProps = [
     }
 ];
 
+const ButtonEvents = [];
+
+const ButtonSlots = [
+    {
+        name: 'icon',
+        description: 'Custom icon template.'
+    },
+    {
+        name: 'loadingicon',
+        description: 'Custom loading icon template.'
+    }
+];
+
 module.exports = {
     button: {
         name: 'Button',
         description: 'Button is an extension to standard button element with icons and theming.',
-        props: ButtonProps
+        props: ButtonProps,
+        events: ButtonEvents,
+        slots: ButtonSlots
     }
 };
diff --git a/components/lib/button/Button.d.ts b/components/lib/button/Button.d.ts
index a66e2a8d8..7d85f2b53 100755
--- a/components/lib/button/Button.d.ts
+++ b/components/lib/button/Button.d.ts
@@ -54,7 +54,6 @@ export interface ButtonProps extends ButtonHTMLAttributes {
     loading?: boolean | undefined;
     /**
      * Icon to display in loading state.
-     * @defaultValue pi pi-spinner pi-spin
      */
     loadingIcon?: string | undefined;
     /**
@@ -105,6 +104,26 @@ export interface ButtonSlots {
      * Custom content such as icons, images and text can be placed inside the button via the default slot. Note that when slot is used, label, icon and badge properties are not included.
      */
     default(): VNode[];
+    /**
+     * Custom icon template.
+     * @param {Object} scope - icon slot's params.
+     */
+    icon(scope: {
+        /**
+         * Style class of the icon.
+         */
+        class: string;
+    }): VNode[];
+    /**
+     * Custom loading icon template.
+     * @param {Object} scope - loading icon slot's params.
+     */
+    loadingicon(scope: {
+        /**
+         * Style class of the loading icon.
+         */
+        class: string;
+    }): VNode[];
 }
 
 /**
diff --git a/components/lib/button/Button.vue b/components/lib/button/Button.vue
index a60cececc..ce787ef81 100755
--- a/components/lib/button/Button.vue
+++ b/components/lib/button/Button.vue
@@ -1,15 +1,21 @@
 <template>
     <button v-ripple :class="buttonClass" type="button" :aria-label="defaultAriaLabel" :disabled="disabled">
-        <slot>
-            <span v-if="loading && !icon" :class="iconStyleClass"></span>
-            <span v-if="icon" :class="iconStyleClass"></span>
+        <slot></slot>
+        <template v-if="!$slots.default">
+            <slot v-if="loading" name="loadingicon" :class="iconStyleClass">
+                <component :is="loadingIcon ? 'span' : 'SpinnerIcon'" :class="iconStyleClass" spin />
+            </slot>
+            <slot v-else name="icon" :class="iconStyleClass">
+                <span v-if="icon" :class="iconStyleClass"></span>
+            </slot>
             <span class="p-button-label">{{ label || '&nbsp;' }}</span>
             <span v-if="badge" :class="badgeStyleClass">{{ badge }}</span>
-        </slot>
+        </template>
     </button>
 </template>
 
 <script>
+import SpinnerIcon from 'primevue/icon/spinner';
 import Ripple from 'primevue/ripple';
 
 export default {
@@ -45,7 +51,7 @@ export default {
         },
         loadingIcon: {
             type: String,
-            default: 'pi pi-spinner pi-spin'
+            default: undefined
         },
         link: {
             type: Boolean,
@@ -85,11 +91,11 @@ export default {
             return [
                 'p-button p-component',
                 {
-                    'p-button-icon-only': this.icon && !this.label,
+                    'p-button-icon-only': this.hasIcon && !this.label,
                     'p-button-vertical': (this.iconPos === 'top' || this.iconPos === 'bottom') && this.label,
                     'p-disabled': this.$attrs.disabled || this.loading,
                     'p-button-loading': this.loading,
-                    'p-button-loading-label-only': this.loading && !this.icon && this.label,
+                    'p-button-loading-label-only': this.loading && !this.hasIcon && this.label,
                     'p-button-link': this.link,
                     [`p-button-${this.severity}`]: this.severity,
                     'p-button-raised': this.raised,
@@ -104,7 +110,7 @@ export default {
         },
         iconStyleClass() {
             return [
-                this.loading ? 'p-button-loading-icon ' + this.loadingIcon : this.icon,
+                this.loading ? 'p-button-loading-icon ' + (this.loadingIcon || '') : this.icon,
                 'p-button-icon',
                 this.iconClass,
                 {
@@ -129,8 +135,14 @@ export default {
         },
         defaultAriaLabel() {
             return this.label ? this.label + (this.badge ? ' ' + this.badge : '') : this.$attrs['aria-label'];
+        },
+        hasIcon() {
+            return this.icon || this.$slots.icon;
         }
     },
+    components: {
+        SpinnerIcon
+    },
     directives: {
         ripple: Ripple
     }