close #3402

examples/routers/button.vue

@@ -15,7 +15,6 @@
         line-height: 1;
         -webkit-font-smoothing: antialiased;
         -moz-osx-font-smoothing: grayscale;
-        vertical-align: middle;
     }
     .i-icon-accessory:before { content: "\e6dd"; }
 
@@ -297,6 +296,10 @@
         <Icon custom="i-icon i-icon-video" size="24" color="#ff6600" />
         <Icon custom="i-icon i-icon-time" />
         <Icon type="ionic" />
+        <Button icon="ionic">Default</Button>
+        <Button custom-icon="i-icon i-icon-search">Default</Button>
+        <Button icon="ionic" shape="circle"></Button>
+        <Button custom-icon="i-icon i-icon-video" shape="circle"></Button>
         <hr>
         <Button>Default</Button>
         <Button type="primary">Primary</Button>

src/components/button/button.vue

@@ -5,7 +5,7 @@
         :disabled="disabled"
         @click="handleClick">
         <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
-        <Icon :type="icon" v-if="icon && !loading"></Icon>
+        <Icon :type="icon" :custom="customIcon" v-if="(icon || customIcon) && !loading"></Icon>
         <span v-if="showSlot" ref="slot"><slot></slot></span>
     </button>
 </template>
@@ -42,7 +42,14 @@
                     return oneOf(value, ['button', 'submit', 'reset']);
                 }
             },
-            icon: String,
+            icon: {
+                type: String,
+                default: ''
+            },
+            customIcon: {
+                type: String,
+                default: ''
+            },
             long: {
                 type: Boolean,
                 default: false
@@ -63,7 +70,7 @@
                         [`${prefixCls}-${this.shape}`]: !!this.shape,
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-loading`]: this.loading != null && this.loading,
-                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || this.loading)
+                        [`${prefixCls}-icon-only`]: !this.showSlot && (!!this.icon || !!this.customIcon || this.loading)
                     }
                 ];
             }