Tree: expand hot area of arrow icon

packages/theme-chalk/src/tree.scss

@@ -33,7 +33,7 @@
     cursor: pointer;
 
     & > .el-tree-node__expand-icon {
-      margin: 0 8px;
+      padding: 6px;
     }
     & > .el-checkbox {
       margin-right: 8px;
@@ -45,13 +45,8 @@
 
   @include e(expand-icon) {
     cursor: pointer;
-    width: 0;
-    height: 0;
-    margin-left: 10px;
-    border: 3.5px solid transparent;
-    border-right-width: 0;
-    border-left-color: $--tree-expand-icon-color;
-    border-left-width: 6px;
+    color: $--tree-expand-icon-color;
+    font-size: 12px;
 
     transform: rotate(0deg);
     transition: transform 0.3s ease-in-out;
@@ -61,7 +56,7 @@
     }
 
     &.is-leaf {
-      border-color: transparent;
+      color: transparent;
       cursor: default;
     }
   }

packages/tree/src/tree-node.vue

@@ -10,7 +10,7 @@
     <div class="el-tree-node__content"
       :style="{ 'padding-left': (node.level - 1) * tree.indent + 'px' }">
       <span
-        class="el-tree-node__expand-icon"
+        class="el-tree-node__expand-icon el-icon-caret-right"
         @click.stop="handleExpandIconClick"
         :class="{ 'is-leaf': node.isLeaf, expanded: !node.isLeaf && expanded }">
       </span>