diff --git a/dev/App.vue b/dev/App.vue
index c77b2af..9f4b4f7 100644
--- a/dev/App.vue
+++ b/dev/App.vue
@@ -13,10 +13,12 @@
           default-tree-node-name="new node"
           default-leaf-node-name="new leaf"
           v-bind:default-expanded="false">
-          <span class="icon" slot="addTreeNode">addTreeNode</span>
-          <span class="icon" slot="addLeafNode">addLeafNode</span>
-          <span class="icon" slot="editNode">editNode</span>
-          <span class="icon" slot="delNode">delNode</span>
+          <span class="icon" slot="addTreeNodeIcon">📂</span>
+          <span class="icon" slot="addLeafNodeIcon">＋</span>
+          <span class="icon" slot="editNodeIcon">📃</span>
+          <span class="icon" slot="delNodeIcon">✂️</span>
+          <span class="icon" slot="leafNodeIcon">🍃</span>
+          <span class="icon" slot="treeNodeIcon">🌲</span>
         </vue-tree-list>
         <button @click="getNewTree">Get new tree</button>
         <pre>
diff --git a/package.json b/package.json
index 4a360fc..72e9b13 100644
--- a/package.json
+++ b/package.json
@@ -42,6 +42,7 @@
     "chai": "^3.5.0",
     "cross-env": "^5.0.1",
     "css-loader": "^0.26.2",
+    "cz-conventional-changelog": "^2.1.0",
     "file-loader": "^0.10.1",
     "html-webpack-plugin": "^2.8.1",
     "husky": "^1.2.0",
@@ -61,8 +62,5 @@
     "webpack": "^1.13.2",
     "webpack-dev-server": "1.14.0",
     "webpack-merge": "^0.14.1"
-  },
-  "dependencies": {
-    "cz-conventional-changelog": "^2.1.0"
   }
 }
diff --git a/readme.md b/readme.md
index 18ff36a..8b19761 100644
--- a/readme.md
+++ b/readme.md
@@ -21,10 +21,12 @@ A vue component for tree structure. Support adding treenode/leafnode, editing no
       default-tree-node-name="new node"
       default-leaf-node-name="new leaf"
       v-bind:default-expanded="false">
-      <span class="icon" slot="addTreeNode">addTreeNode</span>
-      <span class="icon" slot="addLeafNode">addLeafNode</span>
-      <span class="icon" slot="editNode">editNode</span>
-      <span class="icon" slot="delNode">delNode</span>
+      <span class="icon" slot="addTreeNodeIcon">📂</span>
+      <span class="icon" slot="addLeafNodeIcon">＋</span>
+      <span class="icon" slot="editNodeIcon">📃</span>
+      <span class="icon" slot="delNodeIcon">✂️</span>
+      <span class="icon" slot="leafNodeIcon">🍃</span>
+      <span class="icon" slot="treeNodeIcon">🌲</span>
     </vue-tree-list>
     <button @click="getNewTree">Get new tree</button>
     <pre>
@@ -195,11 +197,13 @@ drop-before | {node, src, target} | Trigger after dropping a node before another
 drop-after | {node, src, target} | Trigger after dropping a node after another. node: the draggable node, src: the draggable node's parent, target: the node that draggable node will drop after
 
 # customize operation icons
-The component has default icons for `addTreeNode`, `addLeafNode`, `editNode`, `delNode` button, but you can also customize them:
+The component has default icons for `addTreeNodeIcon`, `addLeafNodeIcon`, `editNodeIcon`, `delNodeIcon`, `leafNodeIcon`, `treeNodeIcon` button, but you can also customize them:
 
 ```html
-<span class="icon" slot="addTreeNode">addTreeNode</span>
-<span class="icon" slot="addLeafNode">addLeafNode</span>
-<span class="icon" slot="editNode">editNode</span>
-<span class="icon" slot="delNode">delNode</span>
+      <span class="icon" slot="addTreeNodeIcon">📂</span>
+      <span class="icon" slot="addLeafNodeIcon">＋</span>
+      <span class="icon" slot="editNodeIcon">📃</span>
+      <span class="icon" slot="delNodeIcon">✂️</span>
+      <span class="icon" slot="leafNodeIcon">🍃</span>
+      <span class="icon" slot="treeNodeIcon">🌲</span>
 ```
diff --git a/src/VueTreeList.vue b/src/VueTreeList.vue
index 4e635e0..a919b3e 100644
--- a/src/VueTreeList.vue
+++ b/src/VueTreeList.vue
@@ -38,22 +38,22 @@
         <input v-else class="vtl-input" type="text" ref="nodeInput" :value="model.name" @input="updateName" @blur="setUnEditable">
         <div class="vtl-operation" v-show="isHover">
           <span title="add tree node" @click.stop.prevent="addChild(false)" v-if="!model.isLeaf && !model.addTreeNodeDisabled">
-            <slot name="addTreeNode">
+            <slot name="addTreeNodeIcon">
               <i class="vtl-icon vtl-icon-folder-plus-e"></i>
             </slot>
           </span>
           <span title="add leaf node" @click.stop.prevent="addChild(true)" v-if="!model.isLeaf && !model.addLeafNodeDisabled">
-            <slot name="addLeafNode">
+            <slot name="addLeafNodeIcon">
               <i class="vtl-icon vtl-icon-plus"></i>
             </slot>
           </span>
           <span title="edit" @click.stop.prevent="setEditable" v-if="!model.editNodeDisabled">
-            <slot name="editNode">
+            <slot name="editNodeIcon">
               <i class="vtl-icon vtl-icon-edit"></i>
             </slot>
           </span>
           <span title="delete" @click.stop.prevent="delNode" v-if="!model.delNodeDisabled">
-            <slot name="delNode">
+            <slot name="delNodeIcon">
               <i class="vtl-icon vtl-icon-trash"></i>
             </slot>
           </span>
@@ -76,10 +76,10 @@
         v-bind:default-expanded="defaultExpanded"
         :model="model"
         :key='model.id'>
-          <slot name="addTreeNode" slot="addTreeNode" />
-          <slot name="addLeafNode" slot="addLeafNode" />
-          <slot name="editNode" slot="editNode" />
-          <slot name="delNode" slot="delNode" />
+          <slot name="addTreeNodeIcon" slot="addTreeNodeIcon" />
+          <slot name="addLeafNodeIcon" slot="addLeafNodeIcon" />
+          <slot name="editNodeIcon" slot="editNodeIcon" />
+          <slot name="delNodeIcon" slot="delNodeIcon" />
           <slot name="leafNodeIcon" slot="leafNodeIcon" />
           <slot name="treeNodeIcon" slot="treeNodeIcon" />
       </item>