diff --git a/components/_style/mixin/theme.basic.styl b/components/_style/mixin/theme.basic.styl
index 7799c07de..89732299f 100644
--- a/components/_style/mixin/theme.basic.styl
+++ b/components/_style/mixin/theme.basic.styl
@@ -1,17 +1,17 @@
 /// Brand Color
-color-primary           = #2F86F6 // 品牌色
+color-primary           = #198cff // 品牌色
 
 /// Text Color
-color-text-base         = #111A34 // 重要信息，如一级标题
+color-text-base         = #01080F // 重要信息，如一级标题
 color-text-base-inverse = #FFF
 color-text-body         = #41485D // 普通信息，如正文主要内容
 color-text-minor        = #666f83 // 次要信息，如利益点、摘要
 color-text-caption      = #858B9C // 辅助信息，如列表内容描述
-color-text-disabled     = #C5CAD5 // 禁用状态
+color-text-disabled     = #D9E0E7 // 禁用状态
 color-text-placeholder  = #C5CAD5 // 默认提示输入或占位
 color-text-highlight    = color-primary // 高亮状态
-color-text-warn         = #FF7D41 // 利益点，警告提示
-color-text-error        = #FF5257 // 强提示报错
+color-text-warn         = #FF4040 // 利益点，警告提示
+color-text-error        = #FF4040 // 强提示报错
 color-text-link         = #5878B4 // 文字链接
 
 /// Border & Background Color
@@ -40,7 +40,7 @@ font-weight-medium   = 500
 font-weight-semibold = 600
 
 /// Radius Size
-radius-normal = 4px
+radius-normal = 16px
 radius-circle = 50%
 
 /// Border Size
diff --git a/components/_style/mixin/theme.components.styl b/components/_style/mixin/theme.components.styl
index ae71bc511..7710f8f9d 100644
--- a/components/_style/mixin/theme.components.styl
+++ b/components/_style/mixin/theme.components.styl
@@ -39,11 +39,11 @@ button-default-fill = color-bg-inverse
 button-disabled-fill = color-bg-disabled
 button-warning-fill = color-text-error
 
-button-primary-active-fill = #2A78DC
+button-primary-active-fill = #167DE5
 button-default-active-fill = color-bg-base
 button-warning-active-fill = #E9424F
 
-button-primary-plain-active-fill = #EAF2FE
+button-primary-plain-active-fill = #EBF5FF
 button-default-plain-active-fill = color-bg-base
 button-warning-plain-active-fill = #FAC3C6
 
@@ -214,7 +214,7 @@ icon-size-xs = 20px
 icon-size-sm = 24px
 icon-size-md = 32px
 icon-size-lg = 42px
-icon-font-family = url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.woff") format("woff"), url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.0.2/iconfont.ttf") format("truetype")
+icon-font-family = url("https://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.1.0/iconfont.woff") format("woff"), url("http://manhattan.didistatic.com/static/manhattan/mand-mobile/icon/2.1.0/iconfont.ttf") format("truetype")
 
 /// image-viewer
 image-viewer-index-font-size = 32px
@@ -375,7 +375,7 @@ tab-bg = color-bg-base
 tab-height = 100px
 tab-ink-height = 3px
 tab-offset = h-gap-sl
-tab-item-gap = h-gap-md
+tab-item-gap = 27px
 
 /// tab-picker
 tab-picker-height = 500px
diff --git a/components/action-bar/index.vue b/components/action-bar/index.vue
index c2753e6df..45f5b654b 100644
--- a/components/action-bar/index.vue
+++ b/components/action-bar/index.vue
@@ -70,7 +70,7 @@ export default {
   bottom 0
   right 0
   display flex
-  padding action-bar-padding-v action-bar-padding-h
+  padding action-bar-padding-v action-bar-padding-h 36px
   background color-bg-inverse
   clearfix()
 
@@ -79,7 +79,7 @@ export default {
   flex 1
   padding-bottom constant(safe-area-inset-bottom)
   padding-bottom env(safe-area-inset-bottom)
-  
+
 .md-action-bar-text
   display flex
   flex 1
diff --git a/components/button/demo/cases/demo4.vue b/components/button/demo/cases/demo4.vue
index 07ef64f4c..d127e80fe 100644
--- a/components/button/demo/cases/demo4.vue
+++ b/components/button/demo/cases/demo4.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md-example-child  md-example-child-button md-example-child-button-3">
     <md-button type="link" icon="message">评论</md-button>
-    <md-button type="link" inactive>去看看<md-icon name="arrow-right" size="md"></md-icon></md-button>
+    <md-button type="link" inactive>去看看<md-icon name="arrow" size="md"></md-icon></md-button>
   </div>
 </template>
 
diff --git a/components/button/test/__snapshots__/demo.spec.js.snap b/components/button/test/__snapshots__/demo.spec.js.snap
index b9c39f91d..9b7d5207e 100644
--- a/components/button/test/__snapshots__/demo.spec.js.snap
+++ b/components/button/test/__snapshots__/demo.spec.js.snap
@@ -160,7 +160,7 @@ exports[`Button Text link 1`] = `
   </button> <button type="button" disabled="disabled" class="md-button link inactive block">
     <div class="md-button-inner">
       <!---->
-      <div class="md-button-content">去看看<i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+      <div class="md-button-content">去看看<i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
     </div>
   </button></div>
 `;
diff --git a/components/button/test/cases/demo4.vue b/components/button/test/cases/demo4.vue
index 76a085aef..cc75b52a3 100644
--- a/components/button/test/cases/demo4.vue
+++ b/components/button/test/cases/demo4.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="md-example-child  md-example-child-button md-example-child-button-3">
     <md-button type="link" icon="message">评论</md-button>
-    <md-button type="link" inactive>去看看<md-icon name="arrow-right" size="md"></md-icon></md-button>
+    <md-button type="link" inactive>去看看<md-icon name="arrow" size="md"></md-icon></md-button>
   </div>
 </template>
 
diff --git a/components/cell-item/index.vue b/components/cell-item/index.vue
index 4d34911dc..00c467095 100644
--- a/components/cell-item/index.vue
+++ b/components/cell-item/index.vue
@@ -22,7 +22,7 @@
         <slot name="right">
           {{ addon }}
         </slot>
-        <md-icon v-if="arrow" name="arrow-right" size="md" />
+        <md-icon v-if="arrow" name="arrow" size="md" />
       </div>
     </div>
     <div class="md-cell-item-children" v-if="$slots.children">
@@ -116,7 +116,7 @@ export default {
   justify-content flex-end
   color cell-item-right-color
   font-size cell-item-right-font-size
-  .md-icon-arrow-right
+  .md-icon-arrow
     margin-left 6px
     margin-right -6px
     color color-text-placeholder
diff --git a/components/cell-item/test/__snapshots__/demo.spec.js.snap b/components/cell-item/test/__snapshots__/demo.spec.js.snap
index fc4d69d6c..51740a187 100644
--- a/components/cell-item/test/__snapshots__/demo.spec.js.snap
+++ b/components/cell-item/test/__snapshots__/demo.spec.js.snap
@@ -25,7 +25,7 @@ exports[`CellItem - Demo Basic 1`] = `
           </div>
           <div class="md-cell-item-right">
 
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -85,7 +85,7 @@ exports[`CellItem - Demo Content List 1`] = `
           </div>
           <div class="md-cell-item-right">
             附加文案
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -98,7 +98,7 @@ exports[`CellItem - Demo Content List 1`] = `
           </div>
           <div class="md-cell-item-right">
             附加文案
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -111,7 +111,7 @@ exports[`CellItem - Demo Content List 1`] = `
           </div>
           <div class="md-cell-item-right">
             禁用的项目
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -124,7 +124,7 @@ exports[`CellItem - Demo Content List 1`] = `
           </div>
           <div class="md-cell-item-right">
 
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <div class="md-cell-item-children">
           <p style="font-size:0.24rem;color:#858B9C;">
@@ -152,7 +152,7 @@ exports[`CellItem - Demo Simple List 1`] = `
           </div>
           <div class="md-cell-item-right">
             可用8000.34
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -209,7 +209,7 @@ exports[`CellItem - Demo Simple List 1`] = `
           </div>
           <div class="md-cell-item-right">
             可用8000.34
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -224,7 +224,7 @@ exports[`CellItem - Demo Simple List 1`] = `
           </div>
           <div class="md-cell-item-right">
             可用8000.34
-            <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+            <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
diff --git a/components/codebox/test/__snapshots__/demo.spec.js.snap b/components/codebox/test/__snapshots__/demo.spec.js.snap
index 898bd0328..551dc385a 100644
--- a/components/codebox/test/__snapshots__/demo.spec.js.snap
+++ b/components/codebox/test/__snapshots__/demo.spec.js.snap
@@ -104,6 +104,7 @@ exports[`Codebox System keyboard 1`] = `
                 <li class="keyboard-number-item"><span>9</span></li>
                 <li class="keyboard-number-item"><span>.</span></li>
                 <li class="keyboard-number-item"><span>0</span></li>
+                <!---->
                 <li class="keyboard-number-item slidedown"><span></span></li>
               </ul>
             </div>
@@ -145,6 +146,7 @@ exports[`Codebox Unlimited length 1`] = `
                 <li class="keyboard-number-item"><span>9</span></li>
                 <li class="keyboard-number-item"><span>.</span></li>
                 <li class="keyboard-number-item"><span>0</span></li>
+                <!---->
                 <li class="keyboard-number-item slidedown"><span></span></li>
               </ul>
             </div>
diff --git a/components/date-picker/demo/cases/demo3.vue b/components/date-picker/demo/cases/demo3.vue
index 55483eb7a..4cfad9885 100644
--- a/components/date-picker/demo/cases/demo3.vue
+++ b/components/date-picker/demo/cases/demo3.vue
@@ -4,7 +4,7 @@
       <md-field-item
         name="name"
         title="出险时间"
-        arrow="arrow-right"
+        arrow="arrow"
         align="right"
         :content="datePickerValue"
         @click.native="isDatePickerShow = true">
@@ -70,4 +70,4 @@ export default {
     },
   },
 }
-
</script>
\ No newline at end of file
+
</script>
diff --git a/components/field/item.vue b/components/field/item.vue
index 18eccfdc4..cf4c5234b 100644
--- a/components/field/item.vue
+++ b/components/field/item.vue
@@ -22,7 +22,7 @@
       </div>
       <div class="md-field-item-right" v-if="arrow || addon || $slots.right">
         <slot name="right">{{ addon }}</slot>
-        <md-icon v-if="arrow" :name="arrow === true ? 'arrow-right' : arrow" size="md" />
+        <md-icon v-if="arrow" :name="arrow === true ? 'arrow' : arrow" size="md" />
       </div>
     </div>
     <div class="md-field-item-children" v-if="$slots.children">
@@ -161,7 +161,7 @@ export default {
   justify-content flex-end
   color field-item-addon-color
   font-size field-item-addon-font-size
-  .md-icon-arrow-right
+  .md-icon-arrow
     margin-right -6px
     color color-text-placeholder
 
@@ -173,6 +173,7 @@ export default {
   &.is-solid
     .md-field-item-title
       width field-item-title-width
+      color #01080F
   &.is-disabled
     .md-field-item-control,
     .md-field-item-left,
diff --git a/components/field/test/__snapshots__/demo.spec.js.snap b/components/field/test/__snapshots__/demo.spec.js.snap
index 1cd8805ea..3d3d4ef1a 100644
--- a/components/field/test/__snapshots__/demo.spec.js.snap
+++ b/components/field/test/__snapshots__/demo.spec.js.snap
@@ -50,7 +50,7 @@ exports[`Field Basic 1`] = `
           <div class="md-field-item-control">
             <!---->
           </div>
-          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -58,7 +58,7 @@ exports[`Field Basic 1`] = `
         <div class="md-field-item-content"><label class="md-field-item-title">禁用条目</label>
           <!---->
           <div class="md-field-item-control">内容禁用状态</div>
-          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
diff --git a/components/icon/default-svg-list.js b/components/icon/default-svg-list.js
index 76a40433d..70e5778ca 100644
--- a/components/icon/default-svg-list.js
+++ b/components/icon/default-svg-list.js
@@ -1,8 +1,12 @@
 export default {
   spinner:
     '<svg class="spinner" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.9166666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(30 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.8333333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(60 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.75s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(90 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.6666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(120 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5833333333333334s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(150 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.5s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(180 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.4166666666666667s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(210 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.3333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(240 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.25s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(270 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.16666666666666666s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(300 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="-0.08333333333333333s" repeatCount="indefinite"/></rect><rect x="46.5" y="15.5" rx="12.09" ry="4.03" width="7" height="17" fill="#eee" transform="rotate(330 50 50)"><animate attributeName="opacity" values="1;0" dur="1s" begin="0s" repeatCount="indefinite"/></rect></svg>',
+  ring:
+    '<svg class="ring" viewBox="0 0 100 100" class="center"><defs><linearGradient x1="0" y1="0" x2="1" y2="0" id="ring-a"><stop offset="10%" stop-color="#eee" stop-opacity="0"/><stop offset="100%" stop-color="#eee"/></linearGradient><linearGradient x1="0" y1="0" x2="1" y2="0" id="ring-b"><stop offset="0%" stop-color="#eee"/><stop offset="100%" stop-color="#eee" stop-opacity=".1"/></linearGradient></defs><g stroke-width="8" fill="none"><circle cx="50" cy="50" r="40" stroke="url(\'#ring-a\')" stroke-dasharray="90 0"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;360 50 50" keyTimes="0;0.5;1"/></circle><circle cx="50" cy="50" r="40" stroke-linecap="round" stroke="url(\'#ring-b\')" stroke-dasharray="98 189"><animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 50;180 50 50;360 50 50" keyTimes="0;0.5;1"/></circle></g></svg>',
   'warn-color':
-    '<svg class="alert" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><g fill="none" fill-rule="evenodd"><path d="M50.001 100C22.385 100 0 77.615 0 50.001 0 22.385 22.385 0 50.001 0 77.615 0 100 22.385 100 50.001 100 77.615 77.615 100 50.001 100z" fill="#F3F4F5"/><path d="M45.44 22h10.118l-1.821 34.217h-6.78L45.44 22zm9.646 45.366C56.36 68.575 57 70.036 57 71.758c0 1.943-.645 3.47-1.936 4.577-1.293 1.11-2.8 1.665-4.52 1.665-1.75 0-3.278-.547-4.584-1.644C44.654 75.26 44 73.728 44 71.758c0-1.721.626-3.183 1.873-4.392 1.248-1.205 2.776-1.809 4.585-1.809 1.806 0 3.35.604 4.628 1.809z" fill="#666F83"/></g></svg>',
+    '<svg class="warn" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><g fill="none" fill-rule="evenodd"><path d="M50.001 100C22.385 100 0 77.615 0 50.001 0 22.385 22.385 0 50.001 0 77.615 0 100 22.385 100 50.001 100 77.615 77.615 100 50.001 100z" fill="#F3F4F5"/><path d="M45.44 22h10.118l-1.821 34.217h-6.78L45.44 22zm9.646 45.366C56.36 68.575 57 70.036 57 71.758c0 1.943-.645 3.47-1.936 4.577-1.293 1.11-2.8 1.665-4.52 1.665-1.75 0-3.278-.547-4.584-1.644C44.654 75.26 44 73.728 44 71.758c0-1.721.626-3.183 1.873-4.392 1.248-1.205 2.776-1.809 4.585-1.809 1.806 0 3.35.604 4.628 1.809z" fill="#666F83"/></g></svg>',
   'success-color':
-    '<svg class="alert" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><g fill="#2F86F6" fill-rule="evenodd"><circle opacity=".08" cx="50" cy="50" r="50"/><path d="M76.992 35.422L46.865 65.524l.136.136-4.343 4.348-.14-.14-.12.12-4.413-4.41.125-.124L24.015 51.34l4.343-4.348L42.457 61.11l30.122-30.098z"/></g></svg>',
+    '<svg class="success" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><defs><linearGradient x1="85.237%" y1="96.954%" x2="22.272%" y2="5.057%" id="a"><stop stop-color="#F3F4F5" offset="0%"/><stop stop-color="#F9FAFB" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M50.001 100C22.385 100 0 77.615 0 50.001 0 22.385 22.385 0 50.001 0 77.615 0 100 22.385 100 50.001 100 77.615 77.615 100 50.001 100z" fill="url(#a)"/><path fill="#666F83" d="M41.662 61.51L28.137 47.849 22 54.045 41.754 74l6.135-6.197L78 37.197 71.865 31z"/></g></svg>',
+  'fail-color':
+    '<svg class="fail" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" style="background:0 0"><defs><linearGradient x1="85.237%" y1="96.954%" x2="22.272%" y2="5.057%" id="a"><stop stop-color="#F3F4F5" offset="0%"/><stop stop-color="#F9FAFB" offset="100%"/></linearGradient></defs><g fill="none" fill-rule="evenodd"><path d="M50.001 100C22.385 100 0 77.615 0 50.001 0 22.385 22.385 0 50.001 0 77.615 0 100 22.385 100 50.001 100 77.615 77.615 100 50.001 100z" fill="url(#a)"/><path d="M72.225 32.627l-16.97 16.97 16.97 16.972-5.656 5.656-16.972-16.97-16.97 16.97-5.656-5.656 16.97-16.972-16.97-16.97 5.656-5.656 16.97 16.97L66.57 26.97l5.656 5.656z" fill="#666F83"/></g></svg>',
 }
diff --git a/components/icon/demo/cases/demo0.vue b/components/icon/demo/cases/demo0.vue
index b5bccedb0..49c31d783 100644
--- a/components/icon/demo/cases/demo0.vue
+++ b/components/icon/demo/cases/demo0.vue
@@ -33,6 +33,7 @@ export default {
         'rectangle',
         'right',
         'wrong',
+        'arrow',
         'arrow-left',
         'arrow-right',
         'arrow-up',
diff --git a/components/icon/index.vue b/components/icon/index.vue
index e3329516f..7ac0a5ec6 100644
--- a/components/icon/index.vue
+++ b/components/icon/index.vue
@@ -90,7 +90,7 @@ export default {
     &:before
       position relative
       z-index 2
-  
+
   &.icon-svg
     &.xss
       width icon-size-xxs
@@ -109,16 +109,18 @@ export default {
       vertical-height(icon-size-lg)
 
 // name
+.md-icon-arrow:before
+  content "\e68d"
 .md-icon-rectangle:before
-  content "\e900"
+  content "\e68e"
 .md-icon-invisible:before
   content "\e601"
 .md-icon-visible:before
   content "\e602"
 .md-icon-right:before
-  content "\e905"
+  content "\e68f"
 .md-icon-wrong:before
-  content "\e906"
+  content "\e604"
 .md-icon-info:before
   content "\e605"
 .md-icon-service:before
@@ -126,23 +128,23 @@ export default {
 .md-icon-edit:before
   content "\e607"
 .md-icon-refresh:before
-  content "\e901"
+  content "\e692"
 .md-icon-question:before
   content "\e608"
 .md-icon-setting:before
   content "\e609"
 .md-icon-wait:before
-  content "\e902"
+  content "\e690"
 .md-icon-check:before
-  content "\e904"
+  content "\e60c"
 .md-icon-check-disabled:before
-  content "\e903"
+  content "\e636"
 .md-icon-checked:before, .md-icon-success:before
-  content "\e908"
+  content "\e60d"
 .md-icon-clear:before, .md-icon-fail:before
   content "\e60e"
 .md-icon-info-solid:before
-  content "\e907"
+  content "\e635"
 .md-icon-warn:before
   content "\e60b"
 .md-icon-security:before
@@ -216,7 +218,7 @@ export default {
 .md-icon-arrow-down:before
   content "\e634"
 .md-icon-close:before
-  content "\e604"
+  content "\e68c"
 
 @font-face
   font-family Mand-Mobile-Icon
diff --git a/components/icon/test/__snapshots__/demo.spec.js.snap b/components/icon/test/__snapshots__/demo.spec.js.snap
index d819bf3fc..8084f684a 100644
--- a/components/icon/test/__snapshots__/demo.spec.js.snap
+++ b/components/icon/test/__snapshots__/demo.spec.js.snap
@@ -11,6 +11,9 @@ exports[`Icon - Demo Font icon 1`] = `
   <div class="md-example-item"><i class="md-icon icon-font md-icon-wrong wrong lg" style="color:;"></i>
     <p>wrong</p>
   </div>
+  <div class="md-example-item"><i class="md-icon icon-font md-icon-arrow arrow lg" style="color:;"></i>
+    <p>arrow</p>
+  </div>
   <div class="md-example-item"><i class="md-icon icon-font md-icon-arrow-left arrow-left lg" style="color:;"></i>
     <p>arrow-left</p>
   </div>
diff --git a/components/icon/test/cases/demo0.vue b/components/icon/test/cases/demo0.vue
index 8f7d6c9c4..44bc7f1fe 100644
--- a/components/icon/test/cases/demo0.vue
+++ b/components/icon/test/cases/demo0.vue
@@ -27,6 +27,7 @@ export default {
         'rectangle',
         'right',
         'wrong',
+        'arrow',
         'arrow-left',
         'arrow-right',
         'arrow-up',
diff --git a/components/input-item/test/__snapshots__/demo.spec.js.snap b/components/input-item/test/__snapshots__/demo.spec.js.snap
index 868f783e4..ba6dddada 100644
--- a/components/input-item/test/__snapshots__/demo.spec.js.snap
+++ b/components/input-item/test/__snapshots__/demo.spec.js.snap
@@ -238,6 +238,7 @@ exports[`InputItem - Demo input with controls 1`] = `
                       <li class="keyboard-number-item"><span>9</span></li>
                       <li class="keyboard-number-item"><span>.</span></li>
                       <li class="keyboard-number-item"><span>0</span></li>
+                      <!---->
                       <li class="keyboard-number-item slidedown"><span></span></li>
                     </ul>
                   </div>
diff --git a/components/notice-bar/index.vue b/components/notice-bar/index.vue
index dd20af3bd..5eb0f222e 100644
--- a/components/notice-bar/index.vue
+++ b/components/notice-bar/index.vue
@@ -109,7 +109,7 @@ export default {
     },
 
     rightIcon() {
-      return this.mode === 'link' ? 'arrow-right' : 'close'
+      return this.mode === 'link' ? 'arrow' : 'close'
     },
   },
 
@@ -190,7 +190,7 @@ export default {
   align-items center
 
 .md-notice-bar-left
-  padding-right 12px
+  padding-right 16px
 .md-notice-bar-right
   padding-right 32px
 .md-notice-bar-empty
@@ -200,6 +200,7 @@ export default {
   flex 1
   margin auto
   width auto
+  margin-right 40px
   line-height 64px
   white-space nowrap
   overflow hidden
diff --git a/components/notice-bar/test/__snapshots__/demo.spec.js.snap b/components/notice-bar/test/__snapshots__/demo.spec.js.snap
index 5669f2baf..a7876b7e1 100644
--- a/components/notice-bar/test/__snapshots__/demo.spec.js.snap
+++ b/components/notice-bar/test/__snapshots__/demo.spec.js.snap
@@ -41,7 +41,7 @@ exports[`NoticeBar - Demo Multi-line display 1`] = `
         为了确保您的资金安全，请设置支付密码。为了确保您的资金安全，请设置支付密码。为了确保您的资金安全，请设置支付密码。
       </div>
     </div>
-    <div class="md-notice-bar-right"><i class="md-icon icon-font md-notice-icon md-notice-icon-right md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+    <div class="md-notice-bar-right"><i class="md-icon icon-font md-notice-icon md-notice-icon-right md-icon-arrow arrow md" style="color:;"></i></div>
   </div>
 </div>
 `;
@@ -110,7 +110,7 @@ exports[`NoticeBar - Demo Theme 1`] = `
         福利来啦，7日免息券发放中！
       </div>
     </div>
-    <div class="md-notice-bar-right"><i class="md-icon icon-font md-notice-icon md-notice-icon-right md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+    <div class="md-notice-bar-right"><i class="md-icon icon-font md-notice-icon md-notice-icon-right md-icon-arrow arrow md" style="color:;"></i></div>
   </div>
 </div>
 `;
diff --git a/components/number-keyboard/board.vue b/components/number-keyboard/board.vue
index 52df67fdb..b69f8140d 100644
--- a/components/number-keyboard/board.vue
+++ b/components/number-keyboard/board.vue
@@ -1,5 +1,8 @@
 <template>
-  <div class="md-number-keyboard-container" :class="type">
+  <div
+    class="md-number-keyboard-container"
+    :class="[type, disabled ? 'disabled' : '']"
+  >
     <div class="keyboard-number">
       <ul class="keyboard-number-list">
         <md-number-key
@@ -13,23 +16,31 @@
           <md-number-key
             class="keyboard-number-item"
             v-if="!hideDot"
-            :value="dotText"
+            :value="duplicateZero ? '0' : dotText"
             @press="$_onNumberKeyClick"
           ></md-number-key>
           <md-number-key
             class="keyboard-number-item"
             :class="{'large-item': hideDot}"
-            :value="keyNumberList[9]"
+            :value="duplicateZero ? '00' : keyNumberList[9]"
             @press="$_onNumberKeyClick"
           ></md-number-key>
-          <li class="keyboard-number-item" v-if="isView"></li>
           <md-number-key
-            v-else
-            class="keyboard-number-item slidedown"
-            no-touch
-            no-prevent
-            @press="$_onSlideDoneClick"
+            class="keyboard-number-item"
+            v-if="duplicateZero"
+            :value="dotText"
+            @press="$_onNumberKeyClick"
           ></md-number-key>
+          <template v-if="!duplicateZero">
+            <li class="keyboard-number-item" v-if="isView"></li>
+            <md-number-key
+              v-else
+              class="keyboard-number-item slidedown"
+              no-touch
+              no-prevent
+              @press="$_onSlideDoneClick"
+            ></md-number-key>
+          </template>
         </template>
         <template v-else>
           <li class="keyboard-number-item no-bg"></li>
@@ -99,6 +110,13 @@ export default {
       type: Function,
       default: noop,
     },
+    disabled: {
+      type: Boolean,
+    },
+    duplicateZero: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -131,12 +149,21 @@ export default {
 
     // MARK: events handler, 如 $_onButtonClick
     $_onNumberKeyClick(val) {
+      if (this.disabled) {
+        return
+      }
       this.$emit('enter', val)
     },
     $_onDeleteClick() {
+      if (this.disabled) {
+        return
+      }
       this.$emit('delete')
     },
     $_onConfirmeClick() {
+      if (this.disabled) {
+        return
+      }
       this.$emit('confirm')
     },
     $_onSlideDoneClick() {
@@ -231,4 +258,7 @@ export default {
           justify-content center
           &:active
             background-color number-keyboard-key-confirm-bg-tap
+  &.disabled
+    .keyboard-operate-item.confirm
+      background-color color-text-disabled !important
 </style>
diff --git a/components/number-keyboard/index.vue b/components/number-keyboard/index.vue
index 51a7a0e62..7354d4b42 100644
--- a/components/number-keyboard/index.vue
+++ b/components/number-keyboard/index.vue
@@ -12,6 +12,7 @@
         :is-view="isView"
         :hide-dot="hideDot"
         :text-render="textRender"
+        :disabled="disabled"
         @enter="$_onEnter"
         @delete="$_onDelete"
         @confirm="$_onConfirm"
@@ -38,6 +39,7 @@
           :is-view="isView"
           :hide-dot="hideDot"
           :text-render="textRender"
+          :disabled="disabled"
           @enter="$_onEnter"
           @delete="$_onDelete"
           @confirm="$_onConfirm"
@@ -83,6 +85,10 @@ export default {
       type: Boolean,
       default: true,
     },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
     okText: {
       type: String,
     },
diff --git a/components/number-keyboard/test/__snapshots__/demo.spec.js.snap b/components/number-keyboard/test/__snapshots__/demo.spec.js.snap
index 10eb8c7f9..6bd01137d 100644
--- a/components/number-keyboard/test/__snapshots__/demo.spec.js.snap
+++ b/components/number-keyboard/test/__snapshots__/demo.spec.js.snap
@@ -53,6 +53,7 @@ exports[`NumberKeyboard - Demo With confirmation key and decimal point, generall
               <li class="keyboard-number-item"><span>9</span></li>
               <li class="keyboard-number-item"><span>.</span></li>
               <li class="keyboard-number-item"><span>0</span></li>
+              <!---->
               <li class="keyboard-number-item slidedown"><span></span></li>
             </ul>
           </div>
@@ -85,6 +86,7 @@ exports[`NumberKeyboard - Demo With confirmation key and decimal point, generall
               <li class="keyboard-number-item"><span>9</span></li>
               <!---->
               <li class="keyboard-number-item large-item"><span>0</span></li>
+              <!---->
               <li class="keyboard-number-item slidedown"><span></span></li>
             </ul>
           </div>
@@ -117,6 +119,7 @@ exports[`NumberKeyboard - Demo With confirmation key and decimal point, generall
               <li class="keyboard-number-item"><span>9</span></li>
               <li class="keyboard-number-item"><span>x</span></li>
               <li class="keyboard-number-item"><span>0</span></li>
+              <!---->
               <li class="keyboard-number-item slidedown"><span></span></li>
             </ul>
           </div>
diff --git a/components/picker/demo/cases/demo2.vue b/components/picker/demo/cases/demo2.vue
index 8bcedd727..7822788a7 100644
--- a/components/picker/demo/cases/demo2.vue
+++ b/components/picker/demo/cases/demo2.vue
@@ -3,13 +3,13 @@
     <md-field>
       <md-field-item
         title="起保年份"
-        arrow="arrow-right"
+        arrow="arrow"
         :addon="pickerValue0"
         @click="isPickerShow0 = true">
       </md-field-item>
       <md-field-item
         title="省市区/县"
-        arrow="arrow-right"
+        arrow="arrow"
         :addon="pickerValue1"
         @click="isPickerShow1 = true">
       </md-field-item>
diff --git a/components/popup/title-bar.vue b/components/popup/title-bar.vue
index 4d3a02ea9..751bec88d 100644
--- a/components/popup/title-bar.vue
+++ b/components/popup/title-bar.vue
@@ -138,7 +138,7 @@ export default {
   width 100%
   height popup-title-bar-height
   background-color popup-title-bar-bg
-  border-radius popup-title-bar-radius popup-title-bar-radius 0 0
+  border-radius popup-title-bar-radius-large popup-title-bar-radius-large 0 0
   clearfix()
   overflow hidden
   &.large
@@ -186,6 +186,7 @@ export default {
     p.title
       font-size popup-title-bar-font-size-title
       color popup-title-bar-color-title
+      // font-family PingFangSC-Medium
     p.describe
       margin-top 15px
       font-size popup-title-bar-font-size-describe
diff --git a/components/selector/test/__snapshots__/demo.spec.js.snap b/components/selector/test/__snapshots__/demo.spec.js.snap
index f4532230b..dd3ae5705 100644
--- a/components/selector/test/__snapshots__/demo.spec.js.snap
+++ b/components/selector/test/__snapshots__/demo.spec.js.snap
@@ -11,7 +11,7 @@ exports[`Selector - Demo Check mode 1`] = `
           <div class="md-field-item-control">
             <!---->
           </div>
-          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -125,7 +125,7 @@ exports[`Selector - Demo Confirmed mode 1`] = `
           <div class="md-field-item-control">
             <!---->
           </div>
-          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -239,7 +239,7 @@ exports[`Selector - Demo Custom options 1`] = `
           <div class="md-field-item-control">
             <!---->
           </div>
-          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -382,7 +382,7 @@ exports[`Selector - Demo Multi mode 1`] = `
         <div class="md-field-item-content"><label class="md-field-item-title">多选模式</label>
           <!---->
           <div class="md-field-item-control">1</div>
-          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
@@ -493,7 +493,7 @@ exports[`Selector - Demo No need to confirm 1`] = `
         <div class="md-field-item-content"><label class="md-field-item-title">普通模式</label>
           <!---->
           <div class="md-field-item-control">选项二</div>
-          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i></div>
+          <div class="md-field-item-right"> <i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i></div>
         </div>
         <!---->
       </div>
diff --git a/components/steps/index.vue b/components/steps/index.vue
index dbc0c7909..279b2f369 100644
--- a/components/steps/index.vue
+++ b/components/steps/index.vue
@@ -8,7 +8,8 @@
       'no-current': currentLength % 1 !== 0
     }"
   >
-    <template v-for="(step, index) of steps">
+    <slot v-if="custom" :steps="steps"></slot>
+    <template v-else v-for="(step, index) of steps">
       <div class="step-wrapper"
         :class="[$_getStepStatusClass(index)]"
         :key="`steps-${index}`"
@@ -117,6 +118,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    custom: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
diff --git a/components/tab-bar/index.vue b/components/tab-bar/index.vue
index bf87a4af6..c32174fb0 100644
--- a/components/tab-bar/index.vue
+++ b/components/tab-bar/index.vue
@@ -72,8 +72,8 @@ export default {
       default: true,
     },
     inkLength: {
-      type: Number,
-      default: 100,
+      type: [Number, String],
+      default: '25',
     },
     immediate: {
       type: Boolean,
@@ -225,7 +225,7 @@ export default {
         }
 
         const target = this.$refs.items[this.currentIndex]
-        this.inkWidth = target.offsetWidth * this.inkLength / 100
+        this.inkWidth = typeof this.inkLength === 'string' ? this.inkLength : target.offsetWidth * this.inkLength / 100
         this.inkPos = target.offsetLeft + (target.offsetWidth - this.inkWidth) / 2
 
         const prevTarget = this.$refs.items[this.currentIndex - 1]
diff --git a/components/tab-bar/test/__snapshots__/demo.spec.js.snap b/components/tab-bar/test/__snapshots__/demo.spec.js.snap
index 9dd5b4af0..30dc4c5dd 100644
--- a/components/tab-bar/test/__snapshots__/demo.spec.js.snap
+++ b/components/tab-bar/test/__snapshots__/demo.spec.js.snap
@@ -28,7 +28,7 @@ exports[`TabBar - Demo Custom Item 1`] = `
         <!---->
         <div scroll-wrapper="" class="scroll-view-container">
           <!---->
-          <div class="md-tab-bar-list" style="width:0px;"><a class="md-tab-bar-item is-active"><i class="md-icon icon-font md-icon-arrow-up arrow-up md" style="color:;"></i> <span>标签1</span></a><a class="md-tab-bar-item"><i class="md-icon icon-font md-icon-arrow-right arrow-right md" style="color:;"></i> <span>标签2</span></a><a class="md-tab-bar-item"><i class="md-icon icon-font md-icon-arrow-down arrow-down md" style="color:;"></i> <span>标签3</span></a><a class="md-tab-bar-item"><i class="md-icon icon-font md-icon-arrow-left arrow-left md" style="color:;"></i> <span>标签4</span></a></div> <span class="md-tab-bar-ink" style="width:0px;transform:translateX(0px);"></span>
+          <div class="md-tab-bar-list" style="width:0px;"><a class="md-tab-bar-item is-active"><i class="md-icon icon-font md-icon-arrow-up arrow-up md" style="color:;"></i> <span>标签1</span></a><a class="md-tab-bar-item"><i class="md-icon icon-font md-icon-arrow arrow md" style="color:;"></i> <span>标签2</span></a><a class="md-tab-bar-item"><i class="md-icon icon-font md-icon-arrow-down arrow-down md" style="color:;"></i> <span>标签3</span></a><a class="md-tab-bar-item"><i class="md-icon icon-font md-icon-arrow-left arrow-left md" style="color:;"></i> <span>标签4</span></a></div> <span class="md-tab-bar-ink" style="width:0px;transform:translateX(0px);"></span>
           <!---->
         </div>
         <!---->
diff --git a/components/tab-bar/test/cases/demo4.vue b/components/tab-bar/test/cases/demo4.vue
index 8c4382af9..e6133b4af 100644
--- a/components/tab-bar/test/cases/demo4.vue
+++ b/components/tab-bar/test/cases/demo4.vue
@@ -22,7 +22,7 @@ export default {
       current: 1,
       items: [
         {name: 1, label: '标签1', icon: 'arrow-up'},
-        {name: 2, label: '标签2', icon: 'arrow-right'},
+        {name: 2, label: '标签2', icon: 'arrow'},
         {name: 3, label: '标签3', icon: 'arrow-down'},
         {name: 4, label: '标签4', icon: 'arrow-left'},
       ],
diff --git a/components/toast/index.js b/components/toast/index.js
index daf734691..8b5783b33 100644
--- a/components/toast/index.js
+++ b/components/toast/index.js
@@ -15,6 +15,7 @@ const Toast = function({
   position = 'center',
   hasMask = false,
   parentNode = document.body,
+  square = false,
 }) {
   let vm = Toast._instance
 
@@ -28,6 +29,7 @@ const Toast = function({
         duration,
         position,
         hasMask,
+        square,
       },
     }).$mount()
   }
@@ -42,6 +44,7 @@ const Toast = function({
   vm.duration = duration
   vm.position = position
   vm.hasMask = hasMask
+  vm.square = square
   // vm.visible = true
   // vm.fire()
   vm.show()
@@ -71,13 +74,14 @@ Toast.hide = () => {
  * @returns {Toast}
  */
 
-Toast.info = (content = '', duration = 3000, hasMask = false, parentNode = document.body) => {
+Toast.info = (content = '', duration = 3000, hasMask = false, parentNode = document.body, square = false) => {
   return Toast({
     icon: '',
     content,
     duration,
     hasMask,
     parentNode,
+    square,
   })
 }
 
@@ -90,13 +94,14 @@ Toast.info = (content = '', duration = 3000, hasMask = false, parentNode = docum
  * @returns {Toast}
  */
 
-Toast.succeed = (content = '', duration = 3000, hasMask = false, parentNode = document.body) => {
+Toast.succeed = (content = '', duration = 3000, hasMask = false, parentNode = document.body, square = false) => {
   return Toast({
     icon: 'success',
     content,
     duration,
     hasMask,
     parentNode,
+    square,
   })
 }
 
@@ -109,13 +114,14 @@ Toast.succeed = (content = '', duration = 3000, hasMask = false, parentNode = do
  * @returns {Toast}
  */
 
-Toast.failed = (content = '', duration = 3000, hasMask = false, parentNode = document.body) => {
+Toast.failed = (content = '', duration = 3000, hasMask = false, parentNode = document.body, square = false) => {
   return Toast({
     icon: 'fail',
     content,
     duration,
     hasMask,
     parentNode,
+    square,
   })
 }
 
@@ -127,14 +133,15 @@ Toast.failed = (content = '', duration = 3000, hasMask = false, parentNode = doc
  * @param {node=} [parentNode=document.body]
  * @returns {Toast}
  */
-Toast.loading = (content = '', duration = 0, hasMask = true, parentNode = document.body) => {
+Toast.loading = (content = '', duration = 0, hasMask = true, parentNode = document.body, square = false) => {
   return Toast({
-    icon: 'spinner',
+    icon: 'ring',
     iconSvg: true,
     content,
     duration,
     hasMask,
     parentNode,
+    square,
   })
 }
 
diff --git a/components/toast/test/__snapshots__/demo.spec.js.snap b/components/toast/test/__snapshots__/demo.spec.js.snap
index 12a3ee0f8..ae30a151a 100644
--- a/components/toast/test/__snapshots__/demo.spec.js.snap
+++ b/components/toast/test/__snapshots__/demo.spec.js.snap
@@ -5,8 +5,8 @@ exports[`Toast - Demo Continuous call 1`] = `
   <div class="md-popup with-mask center" style="">
     <div class="md-popup-mask" style=""></div>
     <div class="md-popup-box md-fade" style="">
-      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-spinner lg">
-          <use xlink:href="#spinner"></use>
+      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-ring lg">
+          <use xlink:href="#ring"></use>
         </svg>
         <div class="md-toast-text">载入中</div>
       </div>
@@ -60,8 +60,8 @@ exports[`Toast - Demo Loading 1`] = `
   <div class="md-popup with-mask center" style="">
     <div class="md-popup-mask" style=""></div>
     <div class="md-popup-box md-fade" style="">
-      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-spinner lg">
-          <use xlink:href="#spinner"></use>
+      <div class="md-toast-content"><svg class="md-icon icon-svg md-icon-ring lg">
+          <use xlink:href="#ring"></use>
         </svg>
         <div class="md-toast-text">加载中...</div>
       </div>
diff --git a/components/toast/toast.vue b/components/toast/toast.vue
index cafafefab..493d19186 100644
--- a/components/toast/toast.vue
+++ b/components/toast/toast.vue
@@ -7,10 +7,10 @@
       :hasMask="hasMask"
       :maskClosable="false"
     >
-      <div class="md-toast-content" v-if="$slots.default">
+      <div class="md-toast-content" :class="{ square: square }" v-if="$slots.default">
         <slot></slot>
       </div>
-      <div class="md-toast-content" v-else>
+      <div class="md-toast-content" :class="{ square: square }" v-else>
         <md-icon v-if="icon" :name="icon" size="lg" :svg="iconSvg"/>
         <div class="md-toast-text" v-if="content" v-text="content"></div>
       </div>
@@ -55,6 +55,10 @@ export default {
       type: Boolean,
       default: false,
     },
+    square: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data() {
@@ -140,6 +144,17 @@ export default {
   background-color toast-fill
   box-sizing border-box
   overflow hidden
+  &.square
+    display flex
+    flex-direction column
+    width 300px
+    height 240px
+    padding 56px 60px
+    .md-icon
+      margin-bottom 32px
+      width 60px
+      height 60px
+      font-size 60px
 
 .md-toast-text
   white-space nowrap
diff --git a/examples/category.vue b/examples/category.vue
index 27890198d..7a20e2070 100644
--- a/examples/category.vue
+++ b/examples/category.vue
@@ -14,7 +14,7 @@
         :class="{'active': category.show}"
         @click="toggleCategory(i, category)">
         {{ category.name }}&nbsp;&nbsp;<span>{{ category.text }}</span>
-        <md-icon name="arrow-right" size="md"></md-icon>
+        <md-icon name="arrow" size="md"></md-icon>
       </div>
       <transition name="slide-fade">
         <div class="cg-category-list" v-show="category.show">
@@ -24,7 +24,7 @@
             @click="goToComponent(item.path)">
             <div class="cg-category-item-inner">
               {{ item.name }} - {{ item.text }}
-              <md-icon name="arrow-right" size="sm"></md-icon>
+              <md-icon name="arrow" size="sm"></md-icon>
             </div>
           </div>
           <div class="cg-category-item" @click="toggleCategory(i, category)">