diff --git a/src/pages/demo/components/icon/index.vue b/src/pages/demo/components/icon/index.vue
index ee8f1b15..89aef274 100644
--- a/src/pages/demo/components/icon/index.vue
+++ b/src/pages/demo/components/icon/index.vue
@@ -1,5 +1,37 @@
 <template>
   <Container>
-    Hello
+    <el-row :gutter="10">
+      <el-col :span="4">
+        <div>
+          <Icon></Icon>
+        </div>
+        <div>
+          <Icon name="github"></Icon>
+        </div>
+        <div>
+          <Icon name="github" style="font-size: 100px;"></Icon>
+        </div>
+        <div>
+          <Icon name="github" class="icon-class-demo"></Icon>
+        </div>
+      </el-col>
+      <el-col :span="20">
+        <Markdown url="/static/markdownFiles/article/组件 - 图标组件.md"></Markdown>
+      </el-col>
+    </el-row>
   </Container>
 </template>
+
+<style lang="scss">
+.icon-class-demo {
+  transition: all .3s;
+  font-size: 100px;
+  color: #409EFF;
+  cursor: pointer;
+  user-select: none;
+  &:hover{
+    color: #F56C6C;
+    transform: scale(1.2) rotate(30deg);
+  }
+}
+</style>
diff --git a/src/router/menu/_components.js b/src/router/menu/_components.js
index 1ec7d020..7f9c53b9 100644
--- a/src/router/menu/_components.js
+++ b/src/router/menu/_components.js
@@ -14,7 +14,7 @@ export const menu = {
     // 图标
     {
       title: '图标',
-      icon: 'flask',
+      icon: 'font-awesome',
       children: [
         {
           title: '演示',
diff --git a/static/markdownFiles/article/组件 - 图标组件.md b/static/markdownFiles/article/组件 - 图标组件.md
new file mode 100644
index 00000000..4e62199e
--- /dev/null
+++ b/static/markdownFiles/article/组件 - 图标组件.md	
@@ -0,0 +1,48 @@
+# 图标
+
+## 使用方法
+
+基本
+
+```
+// 并无卵用的使用方式
+<Icon></Icon>
+// 指定图标名称
+<Icon name="github"></Icon>
+// 设置行内样式
+<Icon name="github" style="font-size: 100px;"></Icon>
+// 设置 class
+<Icon name="github" class="icon-class-demo"></Icon>
+```
+
+这个组件只是简化了写法而已
+
+`<Icon name="github"></Icon>` 等于 `<i class="fa fa-github" aria-hidden="true"></i>`
+
+## 参数
+
+| 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
+| --- | --- | --- | --- | --- | --- |
+| name | 图标名称 | 非 | String | font-awesome 所有图标名 | font-awesome |
+
+## 参考
+
+推荐一个国内的图表索引 [Font Awesome 中文网](http://www.fontawesome.com.cn/faicons/)
+
+PS. 左侧最后一个图标的样式 `SCSS`
+
+```
+<style lang="scss">
+.icon-class-demo {
+  transition: all .3s;
+  font-size: 100px;
+  color: #409EFF;
+  cursor: pointer;
+  user-select: none;
+  &:hover{
+    color: #F56C6C;
+    transform: scale(1.2) rotate(30deg);
+  }
+}
+</style>
+```
\ No newline at end of file
diff --git a/static/markdownFiles/article/组件 - 图标选择器.md b/static/markdownFiles/article/组件 - 图标选择器.md
index 8e0ceaeb..61459cc6 100644
--- a/static/markdownFiles/article/组件 - 图标选择器.md	
+++ b/static/markdownFiles/article/组件 - 图标选择器.md	
@@ -2,7 +2,6 @@
 
 ## 参数
 
-
 | 参数名 | 介绍 | 必选 | 值类型 | 可选值 | 默认值 |
 | --- | --- | --- | --- | --- | --- |
 | value | 绑定的值，可以使用 v-model | 非 | String |  |  |