From c0e9fd633a3c487816480cb4533024c8a95a7c61 Mon Sep 17 00:00:00 2001
From: neverland <chenjiahan@buaa.edu.cn>
Date: Mon, 30 Jul 2018 17:01:07 +0800
Subject: [PATCH] [Improvement] Icon: add size prop (#1555)

---
 .../test/__snapshots__/demo.spec.js.snap      |  16 +-
 .../cell/test/__snapshots__/demo.spec.js.snap |  18 +-
 .../test/__snapshots__/demo.spec.js.snap      |  24 +--
 .../test/__snapshots__/demo.spec.js.snap      |  18 +-
 .../test/__snapshots__/demo.spec.js.snap      |  14 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  10 +-
 packages/icon/en-US.md                        |   3 +-
 packages/icon/index.vue                       |   5 +-
 .../icon/test/__snapshots__/demo.spec.js.snap | 186 +++++++++---------
 packages/icon/zh-CN.md                        |   3 +-
 .../test/__snapshots__/demo.spec.js.snap      |   6 +-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  12 +-
 .../test/__snapshots__/demo.spec.js.snap      |   6 +-
 .../test/__snapshots__/demo.spec.js.snap      |   8 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../tab/test/__snapshots__/demo.spec.js.snap  |   4 +-
 .../test/__snapshots__/demo.spec.js.snap      |  12 +-
 .../test/__snapshots__/demo.spec.js.snap      |   2 +-
 .../test/__snapshots__/demo.spec.js.snap      |   4 +-
 22 files changed, 183 insertions(+), 180 deletions(-)

diff --git a/packages/address-list/test/__snapshots__/demo.spec.js.snap b/packages/address-list/test/__snapshots__/demo.spec.js.snap
index 4fdb1cd3a..6a2f62655 100644
--- a/packages/address-list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/address-list/test/__snapshots__/demo.spec.js.snap
@@ -10,9 +10,9 @@ exports[`renders demo correctly 1`] = `
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">张三，13000000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">张三，13000000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市西湖区文三路 138 号东方通信大厦 7 楼 501 室</div></span></div>
             </div>
-            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;">
+            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;size:undefined;">
               <!---->
             </i>
           </div>
@@ -20,9 +20,9 @@ exports[`renders demo correctly 1`] = `
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">李四，1310000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">李四，1310000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市拱墅区莫干山路 50 号</div></span></div>
             </div>
-            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;">
+            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;size:undefined;">
               <!---->
             </i>
           </div>
@@ -30,23 +30,23 @@ exports[`renders demo correctly 1`] = `
             <!---->
             <!---->
             <div class="van-cell__value van-cell__value--alone">
-              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">王五，1320000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市滨江区江南大道 15 号</div></span></div>
+              <div class="van-radio"><span class="van-radio__input"><input type="radio" value="3" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label"><div class="van-address-list__name">王五，1320000000</div> <div class="van-address-list__address">收货地址：浙江省杭州市滨江区江南大道 15 号</div></span></div>
             </div>
-            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;">
+            <i class="van-icon van-icon-edit van-address-list__edit" style="color:undefined;size:undefined;">
               <!---->
             </i>
           </div>
         </div>
       </div>
       <div class="van-hairline--top van-cell van-cell--clickable van-hairline van-address-list__add">
-        <i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;">
+        <i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div class="van-cell__title"><span>新增收货地址</span>
           <!---->
         </div>
         <!---->
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
diff --git a/packages/cell/test/__snapshots__/demo.spec.js.snap b/packages/cell/test/__snapshots__/demo.spec.js.snap
index 16fb1d4d9..092ee702f 100644
--- a/packages/cell/test/__snapshots__/demo.spec.js.snap
+++ b/packages/cell/test/__snapshots__/demo.spec.js.snap
@@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
       <div class="van-cell van-hairline">
-        <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;">
+        <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div class="van-cell__title"><span>单元格</span>
@@ -54,7 +54,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <!---->
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
@@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value"><span>内容</span></div>
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
@@ -74,7 +74,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value"><span>内容</span></div>
-        <i class="van-icon van-icon-arrow van-cell__right-icon van-cell__right-icon--down" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-cell__right-icon van-cell__right-icon--down" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
@@ -83,24 +83,24 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
       <div class="van-cell van-cell--clickable van-hairline">
-        <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;">
+        <i class="van-icon van-icon-shop van-cell__left-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div class="van-cell__title"><span class="van-cell-text">单元格</span> <span class="van-hairline--surround van-tag van-tag--danger">标签</span></div>
         <div class="van-cell__value"><span>内容</span></div>
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
       <div class="van-cell van-cell--clickable van-hairline">
-        <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;">
+        <i class="van-icon van-icon-location van-cell__left-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div class="van-cell__title"><span>单元格</span>
           <!---->
         </div>
         <!---->
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
@@ -110,7 +110,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <!---->
-        <i class="van-cell__right-icon van-icon van-icon-search" style="color:undefined;">
+        <i class="van-cell__right-icon van-icon van-icon-search" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
diff --git a/packages/checkbox/test/__snapshots__/demo.spec.js.snap b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
index 48af34e20..a2044e508 100644
--- a/packages/checkbox/test/__snapshots__/demo.spec.js.snap
+++ b/packages/checkbox/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
-        <i class="van-icon van-icon-success" style="color:undefined;">
+        <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div> <span class="van-checkbox__label">复选框</span></div>
@@ -13,13 +13,13 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled">
-        <i class="van-icon van-icon-success" style="color:undefined;">
+        <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div> <span class="van-checkbox__label">复选框</span></div>
     <div class="van-checkbox">
       <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--disabled van-checkbox__icon--checked">
-        <i class="van-icon van-icon-success" style="color:undefined;">
+        <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div> <span class="van-checkbox__label">复选框</span></div>
@@ -36,7 +36,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-checkbox-group">
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
-          <i class="van-icon van-icon-success" style="color:undefined;">
+          <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div> <span class="van-checkbox__label">
@@ -44,7 +44,7 @@ exports[`renders demo correctly 1`] = `
       </span></div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
-          <i class="van-icon van-icon-success" style="color:undefined;">
+          <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div> <span class="van-checkbox__label">
@@ -52,7 +52,7 @@ exports[`renders demo correctly 1`] = `
       </span></div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round">
-          <i class="van-icon van-icon-success" style="color:undefined;">
+          <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div> <span class="van-checkbox__label">
@@ -64,7 +64,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-checkbox-group">
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round">
-          <i class="van-icon van-icon-success" style="color:undefined;">
+          <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div> <span class="van-checkbox__label">
@@ -72,7 +72,7 @@ exports[`renders demo correctly 1`] = `
       </span></div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round">
-          <i class="van-icon van-icon-success" style="color:undefined;">
+          <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div> <span class="van-checkbox__label">
@@ -80,7 +80,7 @@ exports[`renders demo correctly 1`] = `
       </span></div>
       <div class="van-checkbox">
         <div class="van-checkbox__icon van-checkbox__icon--round">
-          <i class="van-icon van-icon-success" style="color:undefined;">
+          <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div> <span class="van-checkbox__label">
@@ -99,7 +99,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value">
             <div class="van-checkbox">
               <div class="van-checkbox__icon van-checkbox__icon--round">
-                <i class="van-icon van-icon-success" style="color:undefined;">
+                <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
                   <!---->
                 </i>
               </div>
@@ -116,7 +116,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value">
             <div class="van-checkbox">
               <div class="van-checkbox__icon van-checkbox__icon--round">
-                <i class="van-icon van-icon-success" style="color:undefined;">
+                <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
                   <!---->
                 </i>
               </div>
@@ -133,7 +133,7 @@ exports[`renders demo correctly 1`] = `
           <div class="van-cell__value">
             <div class="van-checkbox">
               <div class="van-checkbox__icon van-checkbox__icon--round">
-                <i class="van-icon van-icon-success" style="color:undefined;">
+                <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
                   <!---->
                 </i>
               </div>
diff --git a/packages/collapse/test/__snapshots__/demo.spec.js.snap b/packages/collapse/test/__snapshots__/demo.spec.js.snap
index 68d2d4a97..41a703c76 100644
--- a/packages/collapse/test/__snapshots__/demo.spec.js.snap
+++ b/packages/collapse/test/__snapshots__/demo.spec.js.snap
@@ -9,7 +9,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">有赞微商城</div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -22,7 +22,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">有赞零售</div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">有赞美业</div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">有赞微商城</div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -61,7 +61,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">有赞零售</div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -72,7 +72,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">有赞美业</div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -88,12 +88,12 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <div class="van-cell__value van-cell__value--alone">
             <div>有赞微商城
-              <i class="van-icon van-icon-question" style="color:undefined;">
+              <i class="van-icon van-icon-question" style="color:undefined;size:undefined;">
                 <!---->
               </i>
             </div>
           </div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -104,7 +104,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <!---->
           <div class="van-cell__value van-cell__value--alone">有赞零售</div>
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
diff --git a/packages/contact-card/test/__snapshots__/demo.spec.js.snap b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
index 65cbd3a92..11ddd5a1c 100644
--- a/packages/contact-card/test/__snapshots__/demo.spec.js.snap
+++ b/packages/contact-card/test/__snapshots__/demo.spec.js.snap
@@ -5,12 +5,12 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-contact-card van-contact-card--add">
       <div class="van-contact-card__content">
-        <i class="van-icon van-icon-add2 van-contact-card__icon" style="color:undefined;">
+        <i class="van-icon van-icon-add2 van-contact-card__icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div class="van-contact-card__text">添加订单联系人信息</div>
       </div>
-      <i class="van-icon van-icon-arrow van-contact-card__arrow" style="color:undefined;">
+      <i class="van-icon van-icon-arrow van-contact-card__arrow" style="color:undefined;size:undefined;">
         <!---->
       </i>
     </div>
@@ -22,23 +22,23 @@ exports[`renders demo correctly 1`] = `
               <!---->
               <!---->
               <div class="van-cell__value van-cell__value--alone">
-                <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;"> <!----></i></span> <span class="van-radio__label"><p class="van-contact-list__text">联系人：张三</p> <p class="van-contact-list__text">联系电话：13000000000</p></span></div>
+                <div class="van-radio"><span class="van-radio__input"><input type="radio" value="0" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label"><p class="van-contact-list__text">联系人：张三</p> <p class="van-contact-list__text">联系电话：13000000000</p></span></div>
               </div>
-              <i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;">
+              <i class="van-icon van-icon-edit van-contact-list__edit" style="color:undefined;size:undefined;">
                 <!---->
               </i>
             </div>
           </div>
         </div>
         <div class="van-hairline--top van-cell van-cell--clickable van-hairline van-contact-list__add">
-          <i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;">
+          <i class="van-icon van-icon-add van-cell__left-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
           <div class="van-cell__title"><span>新建联系人</span>
             <!---->
           </div>
           <!---->
-          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+          <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -91,7 +91,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-contact-card van-contact-card--edit van-contact-card--uneditable">
       <div class="van-contact-card__content">
-        <i class="van-icon van-icon-contact van-contact-card__icon" style="color:undefined;">
+        <i class="van-icon van-icon-contact van-contact-card__icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div class="van-contact-card__text">
diff --git a/packages/coupon-list/test/__snapshots__/demo.spec.js.snap b/packages/coupon-list/test/__snapshots__/demo.spec.js.snap
index 72f39f565..f21290e26 100644
--- a/packages/coupon-list/test/__snapshots__/demo.spec.js.snap
+++ b/packages/coupon-list/test/__snapshots__/demo.spec.js.snap
@@ -10,7 +10,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
         </div>
         <div class="van-cell__value"><span>您有 2 个可用优惠</span></div>
-        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-cell__right-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
diff --git a/packages/field/test/__snapshots__/demo.spec.js.snap b/packages/field/test/__snapshots__/demo.spec.js.snap
index c31046517..590dc7860 100644
--- a/packages/field/test/__snapshots__/demo.spec.js.snap
+++ b/packages/field/test/__snapshots__/demo.spec.js.snap
@@ -32,7 +32,7 @@ exports[`renders demo correctly 1`] = `
             <input type="text" placeholder="请输入用户名" value="" class="van-field__control">
             <!---->
             <div class="van-field__icon">
-              <i class="van-icon van-icon-question" style="color:undefined;">
+              <i class="van-icon van-icon-question" style="color:undefined;size:undefined;">
                 <!---->
               </i>
             </div>
@@ -63,7 +63,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-cell-group van-hairline--top-bottom">
       <div disabled="disabled" class="van-cell van-hairline van-field">
-        <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;">
+        <i class="van-icon van-icon-contact van-cell__left-icon" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div class="van-cell__title"><span>用户名</span>
diff --git a/packages/goods-action/test/__snapshots__/demo.spec.js.snap b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
index bb4a298d9..5ca022a47 100644
--- a/packages/goods-action/test/__snapshots__/demo.spec.js.snap
+++ b/packages/goods-action/test/__snapshots__/demo.spec.js.snap
@@ -5,11 +5,11 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-goods-action">
       <a class="van-hairline van-goods-action-mini-btn">
-        <i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;">
+        <i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;size:undefined;">
           <!---->
         </i> 客服</a>
       <a class="van-hairline van-goods-action-mini-btn">
-        <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;">
+        <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;size:undefined;">
           <!---->
         </i> 购物车</a>
       <a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn">
@@ -21,15 +21,15 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-goods-action">
       <a class="van-hairline van-goods-action-mini-btn">
-        <i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;">
+        <i class="van-icon van-icon-chat van-goods-action-mini-btn__icon" style="color:undefined;size:undefined;">
           <!---->
         </i> 客服</a>
       <a class="van-hairline van-goods-action-mini-btn">
-        <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;">
+        <i class="van-icon van-icon-cart van-goods-action-mini-btn__icon" style="color:undefined;size:undefined;">
           <div class="van-icon__info">5</div>
         </i> 购物车</a>
       <a class="van-hairline van-goods-action-mini-btn">
-        <i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;">
+        <i class="van-icon van-icon-shop van-goods-action-mini-btn__icon" style="color:undefined;size:undefined;">
           <!---->
         </i> 店铺</a>
       <a class="van-button van-button--default van-button--normal van-button--bottom-action van-goods-action-big-btn">
diff --git a/packages/icon/en-US.md b/packages/icon/en-US.md
index e614f4a6e..1a640f1f1 100644
--- a/packages/icon/en-US.md
+++ b/packages/icon/en-US.md
@@ -50,7 +50,8 @@ import 'vant/lib/vant-css/icon-local.css';
 |-----------|-----------|-----------|-------------|
 | name | Icon name | `String` | `''` |
 | info | Info message | `String | Number` | `''` |
-| color | Icon color | `String` | `''` | - |
+| color | Icon color | `String` | `inherit` |
+| size | Icon size | `String` | `inherit` |
 
 
 ### Event
diff --git a/packages/icon/index.vue b/packages/icon/index.vue
index 4cbc3312d..7522ccc46 100644
--- a/packages/icon/index.vue
+++ b/packages/icon/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <i :class="[b(), `van-icon-${name}`]" :style="{ color }" v-on="$listeners">
+  <i :class="[b(), `van-icon-${name}`]" :style="{ color, size }" v-on="$listeners">
     <slot />
     <div v-if="isDef(info)" :class="b('info')">{{ info }}</div>
   </i>
@@ -14,7 +14,8 @@ export default create({
   props: {
     name: String,
     info: [String, Number],
-    color: String
+    color: String,
+    size: String
   }
 });
 </script>
diff --git a/packages/icon/test/__snapshots__/demo.spec.js.snap b/packages/icon/test/__snapshots__/demo.spec.js.snap
index f2a2ad821..d007dc762 100644
--- a/packages/icon/test/__snapshots__/demo.spec.js.snap
+++ b/packages/icon/test/__snapshots__/demo.spec.js.snap
@@ -4,375 +4,375 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-close" style="color:undefined;">
+      <i class="van-icon van-icon-close" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>close</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-upgrade" style="color:undefined;">
+      <i class="van-icon van-icon-upgrade" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>upgrade</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-add-o" style="color:undefined;">
+      <i class="van-icon van-icon-add-o" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>add-o</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-passed" style="color:undefined;">
+      <i class="van-icon van-icon-passed" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>passed</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-chat" style="color:undefined;">
+      <i class="van-icon van-icon-chat" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>chat</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-question" style="color:undefined;">
+      <i class="van-icon van-icon-question" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>question</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-clock" style="color:undefined;">
+      <i class="van-icon van-icon-clock" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>clock</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gold-coin" style="color:undefined;">
+      <i class="van-icon van-icon-gold-coin" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>gold-coin</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-play" style="color:undefined;">
+      <i class="van-icon van-icon-play" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>play</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pause" style="color:undefined;">
+      <i class="van-icon van-icon-pause" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>pause</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-stop" style="color:undefined;">
+      <i class="van-icon van-icon-stop" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>stop</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-more-o" style="color:undefined;">
+      <i class="van-icon van-icon-more-o" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>more-o</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-info-o" style="color:undefined;">
+      <i class="van-icon van-icon-info-o" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>info-o</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-share" style="color:undefined;">
+      <i class="van-icon van-icon-share" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>share</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-like-o" style="color:undefined;">
+      <i class="van-icon van-icon-like-o" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>like-o</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-logistics" style="color:undefined;">
+      <i class="van-icon van-icon-logistics" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>logistics</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-edit" style="color:undefined;">
+      <i class="van-icon van-icon-edit" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>edit</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-exchange" style="color:undefined;">
+      <i class="van-icon van-icon-exchange" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>exchange</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-location" style="color:undefined;">
+      <i class="van-icon van-icon-location" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>location</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-cart" style="color:undefined;">
+      <i class="van-icon van-icon-cart" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>cart</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-shop" style="color:undefined;">
+      <i class="van-icon van-icon-shop" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>shop</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gift" style="color:undefined;">
+      <i class="van-icon van-icon-gift" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>gift</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-contact" style="color:undefined;">
+      <i class="van-icon van-icon-contact" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>contact</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-wap-home" style="color:undefined;">
+      <i class="van-icon van-icon-wap-home" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>wap-home</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-points" style="color:undefined;">
+      <i class="van-icon van-icon-points" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>points</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-discount" style="color:undefined;">
+      <i class="van-icon van-icon-discount" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>discount</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-point-gift" style="color:undefined;">
+      <i class="van-icon van-icon-point-gift" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>point-gift</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-after-sale" style="color:undefined;">
+      <i class="van-icon van-icon-after-sale" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>after-sale</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-edit-data" style="color:undefined;">
+      <i class="van-icon van-icon-edit-data" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>edit-data</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-delete" style="color:undefined;">
+      <i class="van-icon van-icon-delete" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>delete</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-records" style="color:undefined;">
+      <i class="van-icon van-icon-records" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>records</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-completed" style="color:undefined;">
+      <i class="van-icon van-icon-completed" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>completed</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-certificate" style="color:undefined;">
+      <i class="van-icon van-icon-certificate" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>certificate</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-tosend" style="color:undefined;">
+      <i class="van-icon van-icon-tosend" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>tosend</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-sign" style="color:undefined;">
+      <i class="van-icon van-icon-sign" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>sign</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-photo" style="color:undefined;">
+      <i class="van-icon van-icon-photo" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>photo</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-idcard" style="color:undefined;">
+      <i class="van-icon van-icon-idcard" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>idcard</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-home" style="color:undefined;">
+      <i class="van-icon van-icon-home" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>home</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-free-postage" style="color:undefined;">
+      <i class="van-icon van-icon-free-postage" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>free-postage</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-cash-back-record" style="color:undefined;">
+      <i class="van-icon van-icon-cash-back-record" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>cash-back-record</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-points-mall" style="color:undefined;">
+      <i class="van-icon van-icon-points-mall" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>points-mall</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-exchange-record" style="color:undefined;">
+      <i class="van-icon van-icon-exchange-record" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>exchange-record</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-payment" style="color:undefined;">
+      <i class="van-icon van-icon-pending-payment" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>pending-payment</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-orders" style="color:undefined;">
+      <i class="van-icon van-icon-pending-orders" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>pending-orders</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-deliver" style="color:undefined;">
+      <i class="van-icon van-icon-pending-deliver" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>pending-deliver</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-pending-evaluate" style="color:undefined;">
+      <i class="van-icon van-icon-pending-evaluate" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>pending-evaluate</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-password-view" style="color:undefined;">
+      <i class="van-icon van-icon-password-view" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>password-view</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-password-not-view" style="color:undefined;">
+      <i class="van-icon van-icon-password-not-view" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>password-not-view</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-check" style="color:undefined;">
+      <i class="van-icon van-icon-check" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>check</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-arrow" style="color:undefined;">
+      <i class="van-icon van-icon-arrow" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>arrow</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-arrow-left" style="color:undefined;">
+      <i class="van-icon van-icon-arrow-left" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>arrow-left</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-search" style="color:undefined;">
+      <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>search</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-success" style="color:undefined;">
+      <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>success</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-fail" style="color:undefined;">
+      <i class="van-icon van-icon-fail" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>fail</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-add" style="color:undefined;">
+      <i class="van-icon van-icon-add" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>add</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-checked" style="color:undefined;">
+      <i class="van-icon van-icon-checked" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>checked</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-warn" style="color:undefined;">
+      <i class="van-icon van-icon-warn" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>warn</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-clear" style="color:undefined;">
+      <i class="van-icon van-icon-clear" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>clear</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-underway" style="color:undefined;">
+      <i class="van-icon van-icon-underway" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>underway</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-more" style="color:undefined;">
+      <i class="van-icon van-icon-more" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>more</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-like" style="color:undefined;">
+      <i class="van-icon van-icon-like" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>like</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-photograph" style="color:undefined;">
+      <i class="van-icon van-icon-photograph" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>photograph</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-qr-invalid" style="color:undefined;">
+      <i class="van-icon van-icon-qr-invalid" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>qr-invalid</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-qr" style="color:undefined;">
+      <i class="van-icon van-icon-qr" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>qr</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-add2" style="color:undefined;">
+      <i class="van-icon van-icon-add2" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>add2</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-wechat" style="color:undefined;">
+      <i class="van-icon van-icon-wechat" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>wechat</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-alipay" style="color:undefined;">
+      <i class="van-icon van-icon-alipay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>alipay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-wap-nav" style="color:undefined;">
+      <i class="van-icon van-icon-wap-nav" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>wap-nav</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-ecard-pay" style="color:undefined;">
+      <i class="van-icon van-icon-ecard-pay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>ecard-pay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-balance-pay" style="color:undefined;">
+      <i class="van-icon van-icon-balance-pay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>balance-pay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-peer-pay" style="color:undefined;">
+      <i class="van-icon van-icon-peer-pay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>peer-pay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-credit-pay" style="color:undefined;">
+      <i class="van-icon van-icon-credit-pay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>credit-pay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-debit-pay" style="color:undefined;">
+      <i class="van-icon van-icon-debit-pay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>debit-pay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-other-pay" style="color:undefined;">
+      <i class="van-icon van-icon-other-pay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>other-pay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-shopping-cart" style="color:undefined;">
+      <i class="van-icon van-icon-shopping-cart" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>shopping-cart</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-browsing-history" style="color:undefined;">
+      <i class="van-icon van-icon-browsing-history" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>browsing-history</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-goods-collect" style="color:undefined;">
+      <i class="van-icon van-icon-goods-collect" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>goods-collect</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-shop-collect" style="color:undefined;">
+      <i class="van-icon van-icon-shop-collect" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>shop-collect</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-receive-gift" style="color:undefined;">
+      <i class="van-icon van-icon-receive-gift" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>receive-gift</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-send-gift" style="color:undefined;">
+      <i class="van-icon van-icon-send-gift" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>send-gift</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-setting" style="color:undefined;">
+      <i class="van-icon van-icon-setting" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>setting</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-coupon" style="color:undefined;">
+      <i class="van-icon van-icon-coupon" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>coupon</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gift-card-pay" style="color:undefined;">
+      <i class="van-icon van-icon-gift-card-pay" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>gift-card-pay</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-cash-on-deliver" style="color:undefined;">
+      <i class="van-icon van-icon-cash-on-deliver" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>cash-on-deliver</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-phone" style="color:undefined;">
+      <i class="van-icon van-icon-phone" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>phone</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-description" style="color:undefined;">
+      <i class="van-icon van-icon-description" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>description</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-card" style="color:undefined;">
+      <i class="van-icon van-icon-card" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>card</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-value-card" style="color:undefined;">
+      <i class="van-icon van-icon-value-card" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>value-card</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-gift-card" style="color:undefined;">
+      <i class="van-icon van-icon-gift-card" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>gift-card</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-hot" style="color:undefined;">
+      <i class="van-icon van-icon-hot" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>hot</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-new" style="color:undefined;">
+      <i class="van-icon van-icon-new" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>new</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-new-arrival" style="color:undefined;">
+      <i class="van-icon van-icon-new-arrival" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>new-arrival</span></div>
     <div class="van-col van-col--8">
-      <i class="van-icon van-icon-hot-sale" style="color:undefined;">
+      <i class="van-icon van-icon-hot-sale" style="color:undefined;size:undefined;">
         <!---->
       </i> <span>hot-sale</span></div>
   </div>
diff --git a/packages/icon/zh-CN.md b/packages/icon/zh-CN.md
index d4e5b93f2..451a1ba68 100644
--- a/packages/icon/zh-CN.md
+++ b/packages/icon/zh-CN.md
@@ -54,7 +54,8 @@ import 'vant/lib/vant-css/icon-local.css';
 |-----------|-----------|-----------|-------------|
 | name | 图标名称 | `String` | - |
 | info | 图标右上角文字提示 | `String | Number` | - |
-| color | 图标颜色 | `String` | - |
+| color | 图标颜色 | `String` | `inherit` |
+| size | 图标大小 | `String` | `inherit` |
 
 ### Event
 
diff --git a/packages/nav-bar/test/__snapshots__/demo.spec.js.snap b/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
index 834ee1c4e..f4247c1cd 100644
--- a/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/nav-bar/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-hairline--bottom van-nav-bar" style="z-index:1;">
       <div class="van-nav-bar__left">
-        <i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;size:undefined;">
           <!---->
         </i> <span class="van-nav-bar__text">返回</span></div>
       <div class="van-ellipsis van-nav-bar__title">标题</div>
@@ -15,12 +15,12 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="van-hairline--bottom van-nav-bar" style="z-index:1;">
       <div class="van-nav-bar__left">
-        <i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;">
+        <i class="van-icon van-icon-arrow van-nav-bar__arrow" style="color:undefined;size:undefined;">
           <!---->
         </i> <span class="van-nav-bar__text">返回</span></div>
       <div class="van-ellipsis van-nav-bar__title">标题</div>
       <div class="van-nav-bar__right">
-        <i class="van-icon van-icon-search" style="color:undefined;">
+        <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
           <!---->
         </i>
       </div>
diff --git a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
index 420b9fdc4..359ae80d4 100644
--- a/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -28,7 +28,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
-      <i class="van-icon van-icon-close van-notice-bar__right-icon" style="color:undefined;">
+      <i class="van-icon van-icon-close van-notice-bar__right-icon" style="color:undefined;size:undefined;">
         <!---->
       </i>
     </div>
@@ -37,7 +37,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-notice-bar__wrap">
         <div class="van-notice-bar__content" style="padding-left:0;animation-delay:1s;animation-duration:0s;">足协杯战线连续第2年上演广州德比战，上赛季半决赛上恒大以两回合5-3的总比分淘汰富力。</div>
       </div>
-      <i class="van-icon van-icon-arrow van-notice-bar__right-icon" style="color:undefined;">
+      <i class="van-icon van-icon-arrow van-notice-bar__right-icon" style="color:undefined;size:undefined;">
         <!---->
       </i>
     </div>
diff --git a/packages/radio/test/__snapshots__/demo.spec.js.snap b/packages/radio/test/__snapshots__/demo.spec.js.snap
index d42b36617..aafb9c52b 100644
--- a/packages/radio/test/__snapshots__/demo.spec.js.snap
+++ b/packages/radio/test/__snapshots__/demo.spec.js.snap
@@ -4,14 +4,14 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
-      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
+      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
     </div>
   </div>
   <div>
     <div class="demo-radio-group van-radio-group">
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="1" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
-      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
+      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="1" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 1</span></div>
+      <div class="van-radio van-radio--disabled"><span class="van-radio__input"><input type="radio" disabled="disabled" value="2" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;size:undefined;"> <!----></i></span> <span class="van-radio__label">单选框 2</span></div>
     </div>
   </div>
   <div>
@@ -23,7 +23,7 @@ exports[`renders demo correctly 1`] = `
             <!---->
           </div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;"> <!----></i></span>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="1" checked="checked" class="van-radio__control"> <i class="van-icon van-icon-checked" style="color:undefined;size:undefined;"> <!----></i></span>
               <!---->
             </div>
           </div>
@@ -35,7 +35,7 @@ exports[`renders demo correctly 1`] = `
             <!---->
           </div>
           <div class="van-cell__value">
-            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;"> <!----></i></span>
+            <div class="van-radio"><span class="van-radio__input"><input type="radio" value="2" class="van-radio__control"> <i class="van-icon van-icon-check" style="color:undefined;size:undefined;"> <!----></i></span>
               <!---->
             </div>
           </div>
diff --git a/packages/search/test/__snapshots__/demo.spec.js.snap b/packages/search/test/__snapshots__/demo.spec.js.snap
index c492205cc..13a7d9fa9 100644
--- a/packages/search/test/__snapshots__/demo.spec.js.snap
+++ b/packages/search/test/__snapshots__/demo.spec.js.snap
@@ -4,7 +4,7 @@ exports[`renders demo correctly 1`] = `
 <div>
   <div>
     <div class="van-search" style="background:#f2f2f2;">
-      <i class="van-icon van-icon-search" style="color:undefined;">
+      <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
         <!---->
       </i>
       <div placeholder="请输入商品名称" class="van-cell van-field">
@@ -27,7 +27,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <form action="/">
       <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-        <i class="van-icon van-icon-search" style="color:undefined;">
+        <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <div placeholder="请输入商品名称" class="van-cell van-field">
@@ -52,7 +52,7 @@ exports[`renders demo correctly 1`] = `
   </div>
   <div>
     <div class="van-search van-search--show-action" style="background:#f2f2f2;">
-      <i class="van-icon van-icon-search" style="color:undefined;">
+      <i class="van-icon van-icon-search" style="color:undefined;size:undefined;">
         <!---->
       </i>
       <div class="van-cell van-field">
diff --git a/packages/steps/test/__snapshots__/demo.spec.js.snap b/packages/steps/test/__snapshots__/demo.spec.js.snap
index 9c28f2388..06268dfd9 100644
--- a/packages/steps/test/__snapshots__/demo.spec.js.snap
+++ b/packages/steps/test/__snapshots__/demo.spec.js.snap
@@ -16,7 +16,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-hairline van-step van-step--horizontal van-step--process">
           <div class="van-step__title" style="color:#06bf04;">商家接单</div>
           <div class="van-step__circle-container">
-            <i class="van-icon van-icon-checked" style="color:#06bf04;">
+            <i class="van-icon van-icon-checked" style="color:#06bf04;size:undefined;">
               <!---->
             </i>
           </div>
@@ -45,7 +45,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-steps van-steps--horizontal">
       <div class="van-steps__status">
         <div class="van-steps__icon">
-          <i class="van-icon van-icon-logistics steps-success" style="color:undefined;">
+          <i class="van-icon van-icon-logistics steps-success" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
@@ -65,7 +65,7 @@ exports[`renders demo correctly 1`] = `
         <div class="van-hairline van-step van-step--horizontal van-step--process">
           <div class="van-step__title" style="color:#06bf04;">商家接单</div>
           <div class="van-step__circle-container">
-            <i class="van-icon van-icon-checked" style="color:#06bf04;">
+            <i class="van-icon van-icon-checked" style="color:#06bf04;size:undefined;">
               <!---->
             </i>
           </div>
@@ -98,7 +98,7 @@ exports[`renders demo correctly 1`] = `
             <p>2016-07-12 12:40</p>
           </div>
           <div class="van-step__circle-container">
-            <i class="van-icon van-icon-checked" style="color:#f60;">
+            <i class="van-icon van-icon-checked" style="color:#f60;size:undefined;">
               <!---->
             </i>
           </div>
diff --git a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
index d6f44e45c..41778c866 100644
--- a/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/submit-bar/test/__snapshots__/demo.spec.js.snap
@@ -48,7 +48,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-submit-bar__bar">
         <div class="van-checkbox">
           <div class="van-checkbox__icon van-checkbox__icon--round van-checkbox__icon--checked">
-            <i class="van-icon van-icon-success" style="color:undefined;">
+            <i class="van-icon van-icon-success" style="color:undefined;size:undefined;">
               <!---->
             </i>
           </div> <span class="van-checkbox__label">全选</span></div>
diff --git a/packages/tab/test/__snapshots__/demo.spec.js.snap b/packages/tab/test/__snapshots__/demo.spec.js.snap
index 86e0a4273..9f146f521 100644
--- a/packages/tab/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tab/test/__snapshots__/demo.spec.js.snap
@@ -192,7 +192,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <div>
             <div>
-              <i class="van-icon van-icon-more-o" style="color:undefined;">
+              <i class="van-icon van-icon-more-o" style="color:undefined;size:undefined;">
                 <!---->
               </i>选项
             </div>
@@ -202,7 +202,7 @@ exports[`renders demo correctly 1`] = `
           <!---->
           <div>
             <div>
-              <i class="van-icon van-icon-more-o" style="color:undefined;">
+              <i class="van-icon van-icon-more-o" style="color:undefined;size:undefined;">
                 <!---->
               </i>选项
             </div>
diff --git a/packages/tabbar/test/__snapshots__/demo.spec.js.snap b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
index e1bb6471b..b5c6d9360 100644
--- a/packages/tabbar/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tabbar/test/__snapshots__/demo.spec.js.snap
@@ -6,7 +6,7 @@ exports[`renders demo correctly 1`] = `
     <div class="van-hairline--top-bottom van-tabbar van-tabbar--fixed" style="z-index:1;">
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
-          <i class="van-icon van-icon-shop" style="color:undefined;">
+          <i class="van-icon van-icon-shop" style="color:undefined;size:undefined;">
             <!---->
           </i>
           <!---->
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon van-tabbar-item__icon--dot">
-          <i class="van-icon van-icon-chat" style="color:undefined;">
+          <i class="van-icon van-icon-chat" style="color:undefined;size:undefined;">
             <!---->
           </i>
           <!---->
@@ -24,7 +24,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
-          <i class="van-icon van-icon-records" style="color:undefined;">
+          <i class="van-icon van-icon-records" style="color:undefined;size:undefined;">
             <!---->
           </i>
           <div class="van-icon__info">5</div>
@@ -33,7 +33,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
-          <i class="van-icon van-icon-gold-coin" style="color:undefined;">
+          <i class="van-icon van-icon-gold-coin" style="color:undefined;size:undefined;">
             <!---->
           </i>
           <div class="van-icon__info">20</div>
@@ -53,7 +53,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
-          <i class="van-icon van-icon-chat" style="color:undefined;">
+          <i class="van-icon van-icon-chat" style="color:undefined;size:undefined;">
             <!---->
           </i>
           <!---->
@@ -62,7 +62,7 @@ exports[`renders demo correctly 1`] = `
       </div>
       <div class="van-tabbar-item">
         <div class="van-tabbar-item__icon">
-          <i class="van-icon van-icon-records" style="color:undefined;">
+          <i class="van-icon van-icon-records" style="color:undefined;size:undefined;">
             <!---->
           </i>
           <!---->
diff --git a/packages/tree-select/test/__snapshots__/demo.spec.js.snap b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
index 7b34800e2..fe94d8315 100644
--- a/packages/tree-select/test/__snapshots__/demo.spec.js.snap
+++ b/packages/tree-select/test/__snapshots__/demo.spec.js.snap
@@ -18,7 +18,7 @@ exports[`renders demo correctly 1`] = `
       <div class="van-tree-select__content" style="height:300px;">
         <div class="van-ellipsis van-tree-select__item van-tree-select__item--active">
           杭州
-          <i class="van-icon van-icon-success van-tree-select__selected" style="color:undefined;">
+          <i class="van-icon van-icon-success van-tree-select__selected" style="color:undefined;size:undefined;">
             <!---->
           </i>
         </div>
diff --git a/packages/uploader/test/__snapshots__/demo.spec.js.snap b/packages/uploader/test/__snapshots__/demo.spec.js.snap
index 79fe4a53d..0f30c4ae6 100644
--- a/packages/uploader/test/__snapshots__/demo.spec.js.snap
+++ b/packages/uploader/test/__snapshots__/demo.spec.js.snap
@@ -5,7 +5,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="demo-uploader-container">
       <div class="van-uploader">
-        <i class="van-icon van-icon-photograph" style="color:undefined;">
+        <i class="van-icon van-icon-photograph" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <input type="file" accept="image/*" class="van-uploader__input">
@@ -15,7 +15,7 @@ exports[`renders demo correctly 1`] = `
   <div>
     <div class="demo-uploader-container">
       <div class="van-uploader">
-        <i class="van-icon van-icon-photograph" style="color:undefined;">
+        <i class="van-icon van-icon-photograph" style="color:undefined;size:undefined;">
           <!---->
         </i>
         <input type="file" accept="image/gif, image/jpeg" multiple="multiple" class="van-uploader__input">