diff --git a/README.md b/README.md
index 818c31c8..2a19f01c 100644
--- a/README.md
+++ b/README.md
@@ -18,8 +18,8 @@
 ## Programming
 - [x] Grid
 - [ ] Layout
-- [ ] Button
-- [ ] Icon
+- [x] Button
+- [x] Icon
 - [ ] Input
 - [ ] Radio
 - [ ] Checkbox
diff --git a/src/components/button/button.vue b/src/components/button/button.vue
index 72cf25da..8bb5b83f 100644
--- a/src/components/button/button.vue
+++ b/src/components/button/button.vue
@@ -2,7 +2,7 @@
     <button :type="htmlType" :class="classes" :disabled="disabled">
         <Icon class="ivu-load-loop" type="load-c" v-if="loading"></Icon>
         <Icon :type="icon" v-if="icon && !loading"></Icon>
-        <span v-if="showSlot" v-el:slot><slot></slot></span>
+        <span v-if="showSlot" ref="slot"><slot></slot></span>
     </button>
 </template>
 <script>
@@ -63,8 +63,8 @@
                 ];
             }
         },
-        compiled () {
-            this.showSlot = this.$els.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
+        mounted () {
+            this.showSlot = this.$refs.slot.innerHTML.replace(/\n/g, '').replace(/<!--[\w\W\r\n]*?-->/gmi, '') !== '';
         }
     };
 </script>
diff --git a/src/index.js b/src/index.js
index 77e8f7af..b8947301 100644
--- a/src/index.js
+++ b/src/index.js
@@ -6,7 +6,7 @@ import Affix from './components/affix';
 // import BackTop from './components/back-top';
 // import Badge from './components/badge';
 // import Breadcrumb from './components/breadcrumb';
-// import Button from './components/button';
+import Button from './components/button';
 // import Card from './components/card';
 // import Carousel from './components/carousel';
 // import Cascader from './components/cascader';
@@ -16,7 +16,7 @@ import Affix from './components/affix';
 // import DatePicker from './components/date-picker';
 // import Dropdown from './components/dropdown';
 // import Form from './components/form';
-// import Icon from './components/icon';
+import Icon from './components/icon';
 // import Input from './components/input';
 // import InputNumber from './components/input-number';
 // import LoadingBar from './components/loading-bar';
@@ -54,7 +54,8 @@ const iview = {
     // Breadcrumb,
     // BreadcrumbItem: Breadcrumb.Item,
     // iButton: Button,
-    // ButtonGroup: Button.Group,
+    Button,
+    ButtonGroup: Button.Group,
     // Card,
     // Carousel,
     // CarouselItem: Carousel.Item,
@@ -70,7 +71,7 @@ const iview = {
     // FormItem: Form.Item,
     iCol: Col,
     // Collapse,
-    // Icon,
+    Icon,
     // iInput: Input,
     // InputNumber,
     // LoadingBar,
diff --git a/test/app.vue b/test/app.vue
index c0a4ee68..a6732d6f 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -26,6 +26,7 @@ li + li {
             <ul>
                 <li><router-link to="/affix">Affix</router-link></li>
                 <li><router-link to="/grid">Grid</router-link></li>
+                <li><router-link to="/button">Button</router-link></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index c1fbd330..e42a8ddc 100644
--- a/test/main.js
+++ b/test/main.js
@@ -24,6 +24,10 @@ const router = new VueRouter({
         {
             path: '/grid',
             component: require('./routers/grid.vue')
+        },
+        {
+            path: '/button',
+            component: require('./routers/button.vue')
         }
     ]
 });
diff --git a/test/routers/button.vue b/test/routers/button.vue
index 7866643a..0e053646 100644
--- a/test/routers/button.vue
+++ b/test/routers/button.vue
@@ -1,307 +1,100 @@
 <template>
-    <h4>基本</h4>
-    <br><br>
-    <div style="background: #f60">
-        <input-number></input-number>
-        <Date-picker type="date" placeholder="选择日期" style="width: 100px;display: inline-block"></Date-picker>
-        <i-input style="width: 100px"></i-input>
-        <i-input type="text" placeholder="Username" style="width: 100px">
-            <Icon type="ios-person-outline" slot="prepend"></Icon>
-        </i-input>
-        <i-button type="primary">按钮</i-button>
-        <i-select :model.sync="model1" style="width:200px">
-            <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-        </i-select>
+    <div>
+        <h4>基本</h4>
+        <br><br>
+        <Button-group>
+            <Button>取消</Button>
+            <Button type="primary">确定</Button>
+        </Button-group>
+        <Button-group>
+            <Button disabled>昨日</Button>
+            <Button disabled>今日</Button>
+            <Button disabled>明日</Button>
+        </Button-group>
+        <Button-group>
+            <Button type="primary">L</Button>
+            <Button>M</Button>
+            <Button type="ghost">M</Button>
+            <Button type="dashed">R</Button>
+        </Button-group>
+        <br><br>
+        <h4>配合图标</h4>
+        <br><br>
+        <Button-group>
+            <Button type="primary">
+                <Icon type="chevron-left"></Icon>
+                前进
+            </Button>
+            <Button type="primary">
+                后退
+                <Icon type="chevron-right"></Icon>
+            </Button>
+        </Button-group>
+        <Button-group>
+            <Button type="primary" icon="ios-skipbackward"></Button>
+            <Button type="primary" icon="ios-skipforward"></Button>
+        </Button-group>
+        <Button-group>
+            <Button type="ghost" icon="ios-color-wand-outline"></Button>
+            <Button type="ghost" icon="ios-sunny-outline"></Button>
+            <Button type="ghost" icon="ios-crop"></Button>
+            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+        </Button-group>
+        <br><br>
+        <h4>圆角</h4>
+        <br><br>
+        <Button-group shape="circle">
+            <Button type="primary">
+                <Icon type="chevron-left"></Icon>
+                前进
+            </Button>
+            <Button type="primary">
+                后退
+                <Icon type="chevron-right"></Icon>
+            </Button>
+        </Button-group>
+        <Button-group shape="circle">
+            <Button type="primary" icon="ios-skipbackward"></Button>
+            <Button type="primary" icon="ios-skipforward"></Button>
+        </Button-group>
+        <Button-group shape="circle">
+            <Button type="ghost" icon="ios-color-wand-outline"></Button>
+            <Button type="ghost" icon="ios-sunny-outline"></Button>
+            <Button type="ghost" icon="ios-crop"></Button>
+            <Button type="ghost" icon="ios-color-filter-outline"></Button>
+        </Button-group>
+        <br><br>
+        <h4>尺寸</h4>
+        <br><br>
+        <Button-group size="large">
+            <Button type="ghost">Large</Button>
+            <Button type="ghost">Large</Button>
+        </Button-group>
+        <Button-group>
+            <Button type="ghost">Default</Button>
+            <Button type="ghost">Default</Button>
+        </Button-group>
+        <Button-group size="small">
+            <Button type="ghost">Small</Button>
+            <Button type="ghost">Small</Button>
+        </Button-group>
+        <br><br>
+        <Button-group size="large" shape="circle">
+            <Button type="ghost">Large</Button>
+            <Button type="ghost">Large</Button>
+        </Button-group>
+        <Button-group shape="circle">
+            <Button type="ghost">Default</Button>
+            <Button type="ghost">Default</Button>
+        </Button-group>
+        <Button-group size="small" shape="circle">
+            <Button type="ghost">Small</Button>
+            <Button type="ghost">Small</Button>
+        </Button-group>
     </div>
-    <br><br>
-    <i-button type="success">按钮</i-button>
-    <i-button type="warning">按钮</i-button>
-    <i-button type="error">按钮</i-button>
-    <i-button type="info">按钮</i-button>
-    <i-button icon="ios-search" type="success"></i-button>
-    <br><br>
-    <div style="width:400px">
-        <i-button type="error" long size="small">按钮</i-button>
-    </div>
-    <br><br>
-    <Button-group>
-        <i-button>取消</i-button>
-        <i-button type="primary">确定</i-button>
-    </Button-group>
-    <Button-group>
-        <i-button disabled>昨日</i-button>
-        <i-button disabled>今日</i-button>
-        <i-button disabled>明日</i-button>
-    </Button-group>
-    <Button-group>
-        <i-button type="primary">L</i-button>
-        <i-button>M</i-button>
-        <i-button type="ghost">M</i-button>
-        <i-button type="dashed">R</i-button>
-    </Button-group>
-    <br><br>
-    <h4>配合图标</h4>
-    <br><br>
-    <Button-group>
-        <i-button type="primary">
-            <Icon type="chevron-left"></Icon>
-            前进
-        </i-button>
-        <i-button type="primary">
-            后退
-            <Icon type="chevron-right"></Icon>
-        </i-button>
-    </Button-group>
-    <Button-group>
-        <i-button type="primary" icon="ios-skipbackward"></i-button>
-        <i-button type="primary" icon="ios-skipforward"></i-button>
-    </Button-group>
-    <Button-group>
-        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
-        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
-        <i-button type="ghost" icon="ios-crop"></i-button>
-        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
-    </Button-group>
-    <br><br>
-    <h4>圆角</h4>
-    <br><br>
-    <Button-group shape="circle">
-        <i-button type="primary">
-            <Icon type="chevron-left"></Icon>
-            前进
-        </i-button>
-        <i-button type="primary">
-            后退
-            <Icon type="chevron-right"></Icon>
-        </i-button>
-    </Button-group>
-    <Button-group shape="circle">
-        <i-button type="primary" icon="ios-skipbackward"></i-button>
-        <i-button type="primary" icon="ios-skipforward"></i-button>
-    </Button-group>
-    <Button-group shape="circle">
-        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
-        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
-        <i-button type="ghost" icon="ios-crop"></i-button>
-        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
-    </Button-group>
-    <Button-group shape="circle" size="large">
-        <i-button type="primary" icon="ios-skipbackward"></i-button>
-        <i-button type="primary" icon="ios-skipforward"></i-button>
-    </Button-group>
-    <Button-group shape="circle" size="large">
-        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
-        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
-        <i-button type="ghost" icon="ios-crop"></i-button>
-        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
-    </Button-group>
-    <Button-group shape="circle" size="small">
-        <i-button type="primary" icon="ios-skipbackward"></i-button>
-        <i-button type="primary" icon="ios-skipforward"></i-button>
-    </Button-group>
-    <Button-group shape="circle" size="small">
-        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
-        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
-        <i-button type="ghost" icon="ios-crop"></i-button>
-        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
-    </Button-group>
-
-    <br><br>
-    <h4>Vertical</h4>
-    <br><br>
-
-    <Button-group vertical>
-        <i-button>取消</i-button>
-        <i-button type="primary">确定</i-button>
-    </Button-group>
-    <Button-group vertical>
-        <i-button>取消</i-button>
-        <i-button type="primary">确定</i-button>
-    </Button-group>
-    <Button-group vertical>
-        <i-button disabled>昨日</i-button>
-        <i-button disabled>今日</i-button>
-        <i-button disabled>明日</i-button>
-    </Button-group>
-    <Button-group vertical>
-        <i-button type="primary">L</i-button>
-        <i-button>M</i-button>
-        <i-button type="ghost">M</i-button>
-        <i-button type="dashed">R</i-button>
-    </Button-group>
-    <Button-group vertical>
-        <i-button type="primary">
-            <Icon type="chevron-left"></Icon>
-            前进
-        </i-button>
-        <i-button type="primary">
-            后退
-            <Icon type="chevron-right"></Icon>
-        </i-button>
-    </Button-group>
-    <Button-group vertical>
-        <i-button type="primary" icon="ios-skipbackward"></i-button>
-        <i-button type="primary" icon="ios-skipforward"></i-button>
-    </Button-group>
-    <Button-group vertical>
-        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
-        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
-        <i-button type="ghost" icon="ios-crop"></i-button>
-        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
-    </Button-group>
-    <Button-group vertical size="large">
-        <i-button type="primary" icon="ios-skipbackward"></i-button>
-        <i-button type="primary" icon="ios-skipforward"></i-button>
-    </Button-group>
-    <Button-group shape="circle" vertical size="large">
-        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
-        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
-        <i-button type="ghost" icon="ios-crop"></i-button>
-        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
-    </Button-group>
-    <Button-group shape="circle" vertical size="small">
-        <i-button type="primary" icon="ios-skipbackward"></i-button>
-        <i-button type="primary" icon="ios-skipforward"></i-button>
-    </Button-group>
-    <Button-group shape="circle" vertical size="small">
-        <i-button type="ghost" icon="ios-color-wand-outline"></i-button>
-        <i-button type="ghost" icon="ios-sunny-outline"></i-button>
-        <i-button type="ghost" icon="ios-crop"></i-button>
-        <i-button type="ghost" icon="ios-color-filter-outline"></i-button>
-    </Button-group>
-
-    <br><br>
-    <i-button type="primary" icon="ios-search" shape="circle" size="small"></i-button>
-    <i-button type="primary" icon="ios-search" shape="circle"></i-button>
-    <i-button type="primary" icon="ios-search" shape="circle" size="large"></i-button>
-    <i-button type="primary" icon="ios-search" shape="circle" size="small">搜索</i-button>
-    <i-button type="primary" icon="ios-search" shape="circle">搜索</i-button>
-    <i-button type="primary" icon="ios-search" shape="circle" size="large">搜索</i-button>
-    <br><br>
-    <i-button>Default</i-button>
-    <i-button type="primary">Primary</i-button>
-    <i-button type="ghost">Ghost</i-button>
-    <i-button type="dashed">Dashed</i-button>
-    <i-button type="text">文字按钮</i-button>
-    <i-button type="text" disabled>文字按钮</i-button>
-    <br><br>
-    <i-button type="primary" size="large">Large</i-button>
-    <i-button type="primary">Default</i-button>
-    <i-button type="primary" size="small">Small</i-button>
-    <br><br>
-    <i-button>Default</i-button>
-    <i-button disabled>Default(Disabled)</i-button>
-    <br><br>
-    <i-button type="primary">Primary</i-button>
-    <i-button type="primary" disabled>Primary(Disabled)</i-button>
-    <br><br>
-    <i-button type="ghost">Ghost</i-button>
-    <i-button type="ghost" disabled>Ghost(Disabled)</i-button>
-    <br><br>
-    <i-button type="dashed">dashed</i-button>
-    <i-button type="dashed" disabled>dashed(Disabled)</i-button>
-    <br><br>
-    <i-button type="primary" shape="circle" icon="ios-search"></i-button>
-    <i-button type="primary" icon="ios-search">搜索</i-button>
-    <br><br>
-    <i-button type="ghost" shape="circle">
-        <Icon type="search"></Icon>
-    </i-button>
-    <i-button type="ghost">
-        <Icon type="search"></Icon>
-        搜索
-    </i-button>
-    <i-button type="ghost" shape="circle" size="large">
-        <Icon type="search"></Icon>
-    </i-button>
-    <i-button type="ghost" shape="circle" size="small">
-        <Icon type="search"></Icon>
-    </i-button>
-    <br><br><br>
-    <i-button type="primary" loading>Loading...</i-button>
-    <i-button type="primary" loading size="large">Loading...</i-button>
-    <i-button type="primary" loading size="small">Loading...</i-button>
-    <i-button type="primary" :loading="loading" @click="toLoading">
-        <span v-if="!loading">Click me!</span>
-        <span v-else>Loading...</span>
-    </i-button>
-    <i-button type="primary" :loading="loading2" icon="checkmark-round" @click="toLoading2">
-        <span v-if="!loading2">Click me!</span>
-        <span v-else>Loading...</span>
-    </i-button>
-    <h4>基本</h4>
-    <Button-group size="large">
-        <i-button>取消</i-button>
-        <i-button type="primary">确定</i-button>
-    </Button-group>
-    <Button-group>
-        <i-button type="primary">L</i-button>
-        <i-button>M</i-button>
-        <i-button type="ghost">R</i-button>
-        <i-button type="dashed">R</i-button>
-    </Button-group>
-    <h4>配合图标</h4>
-    <Button-group>
-        <i-button type="primary">
-            <Icon type="chevron-left"></Icon>
-            前进
-        </i-button>
-        <i-button type="primary">
-            后退
-            <Icon type="chevron-right"></Icon>
-        </i-button>
-    </Button-group>
-    <Button-group>
-        <i-button type="primary" icon="cloud"></i-button>
-        <i-button type="primary" icon="upload"></i-button>
-    </Button-group>
 </template>
 <script>
     export default {
-        props: {
 
-        },
-        data () {
-            return {
-                loading: false,
-                loading2: false,
-                model6: '',
-                cityList: [
-                    {
-                        value: 'beijing',
-                        label: '北京市'
-                    },
-                    {
-                        value: 'shanghai',
-                        label: '上海市'
-                    },
-                    {
-                        value: 'shenzhen',
-                        label: '深圳市'
-                    },
-                    {
-                        value: 'hangzhou',
-                        label: '杭州市'
-                    },
-                    {
-                        value: 'nanjing',
-                        label: '南京市'
-                    },
-                    {
-                        value: 'chongqing',
-                        label: '重庆市'
-                    }
-                ],
-                model1: ''
-            }
-        },
-        methods: {
-            toLoading () {
-                this.loading = true;
-            },
-            toLoading2 () {
-                this.loading2 = true;
-            }
-        }
     }
 </script>