diff --git a/mock/asyncRoutes.ts b/mock/asyncRoutes.ts
index c7c7ab4ca..977cbcdf7 100644
--- a/mock/asyncRoutes.ts
+++ b/mock/asyncRoutes.ts
@@ -7,7 +7,7 @@ const systemRouter = {
   name: "system",
   redirect: "/system/user",
   meta: {
-    icon: "el-icon-setting",
+    icon: "Setting",
     title: "message.hssysManagement",
     showLink: true,
     rank: 6
@@ -38,7 +38,7 @@ const permissionRouter = {
   redirect: "/permission/page",
   meta: {
     title: "message.permission",
-    icon: "el-icon-lollipop",
+    icon: "Lollipop",
     showLink: true,
     rank: 3
   },
diff --git a/package.json b/package.json
index 18f310fc7..164d6ce1d 100644
--- a/package.json
+++ b/package.json
@@ -29,7 +29,7 @@
     "cropperjs": "^1.5.11",
     "dayjs": "^1.10.7",
     "echarts": "^5.2.1",
-    "element-plus": "1.1.0-beta.24",
+    "element-plus": "1.2.0-beta.1",
     "element-resize-detector": "^1.2.3",
     "font-awesome": "^4.7.0",
     "lodash-es": "^4.17.21",
diff --git a/src/layout/components/sidebar/sidebarItem.vue b/src/layout/components/sidebar/sidebarItem.vue
index 160ddb417..c9e19e611 100644
--- a/src/layout/components/sidebar/sidebarItem.vue
+++ b/src/layout/components/sidebar/sidebarItem.vue
@@ -57,12 +57,13 @@ function resolvePath(routePath) {
       :class="{ 'submenu-title-noDropdown': !isNest }"
       style="display: flex; align-items: center"
     >
-      <i
-        v-show="props.item.meta.icon"
-        :class="
-          onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
-        "
-      />
+      <el-icon v-show="props.item.meta.icon">
+        <component
+          :is="
+            onlyOneChild.meta.icon || (props.item.meta && props.item.meta.icon)
+          "
+        ></component>
+      </el-icon>
       <template #title>
         <div style="display: flex; align-items: center">
           <span>{{ $t(onlyOneChild.meta.title) }}</span>
@@ -83,7 +84,9 @@ function resolvePath(routePath) {
     popper-append-to-body
   >
     <template #title>
-      <i v-show="props.item.meta.icon" :class="props.item.meta.icon"></i>
+      <el-icon v-show="props.item.meta.icon">
+        <component :is="props.item.meta && props.item.meta.icon"></component>
+      </el-icon>
       <span>{{ $t(props.item.meta.title) }}</span>
       <Icon
         v-if="props.item.meta.extraIcon"
diff --git a/src/plugins/element-plus/index.ts b/src/plugins/element-plus/index.ts
index af19d5a9c..782ed4ae4 100644
--- a/src/plugins/element-plus/index.ts
+++ b/src/plugins/element-plus/index.ts
@@ -38,7 +38,18 @@ import {
 } from "element-plus";
 
 // https://element-plus.org/zh-CN/component/icon.html
-import { Check } from "@element-plus/icons";
+import {
+  Check,
+  Menu,
+  HomeFilled,
+  SetUp,
+  Edit,
+  Setting,
+  Lollipop,
+  Link,
+  Position,
+  Histogram
+} from "@element-plus/icons";
 
 const components = [
   ElTag,
@@ -75,7 +86,18 @@ const components = [
   ElDescriptions,
   ElDescriptionsItem,
   ElBacktop,
-  Check
+
+  // icon
+  Check,
+  Menu,
+  HomeFilled,
+  SetUp,
+  Edit,
+  Setting,
+  Lollipop,
+  Link,
+  Position,
+  Histogram
 ];
 
 const plugins = [ElLoading];
diff --git a/src/router/modules/components.ts b/src/router/modules/components.ts
index 32c5219d0..afae1fd78 100644
--- a/src/router/modules/components.ts
+++ b/src/router/modules/components.ts
@@ -6,7 +6,7 @@ const componentsRouter = {
   component: Layout,
   redirect: "/components/split-pane",
   meta: {
-    icon: "el-icon-menu",
+    icon: "Menu",
     title: "message.hscomponents",
     showLink: true,
     rank: 4
diff --git a/src/router/modules/editor.ts b/src/router/modules/editor.ts
index a2f3cb7e4..ae54f3b12 100644
--- a/src/router/modules/editor.ts
+++ b/src/router/modules/editor.ts
@@ -6,7 +6,7 @@ const editorRouter = {
   component: Layout,
   redirect: "/editor/index",
   meta: {
-    icon: "el-icon-edit-outline",
+    icon: "Edit",
     title: "message.hseditor",
     showLink: true,
     rank: 2
diff --git a/src/router/modules/error.ts b/src/router/modules/error.ts
index 5ab2e437a..9a470d2a2 100644
--- a/src/router/modules/error.ts
+++ b/src/router/modules/error.ts
@@ -6,7 +6,7 @@ const errorRouter = {
   component: Layout,
   redirect: "/error/401",
   meta: {
-    icon: "el-icon-position",
+    icon: "Position",
     title: "message.hserror",
     showLink: true,
     rank: 7
diff --git a/src/router/modules/externalLink.ts b/src/router/modules/externalLink.ts
index a1fe6599e..baa572780 100644
--- a/src/router/modules/externalLink.ts
+++ b/src/router/modules/externalLink.ts
@@ -5,7 +5,7 @@ const externalLink = {
   name: "external",
   component: Layout,
   meta: {
-    icon: "el-icon-link",
+    icon: "Link",
     title: "message.externalLink",
     showLink: true,
     rank: 190
@@ -14,7 +14,6 @@ const externalLink = {
     {
       path: "https://github.com/xiaoxian521/vue-pure-admin",
       meta: {
-        icon: "el-icon-link",
         title: "message.externalLink",
         showLink: true,
         rank: 191
diff --git a/src/router/modules/flowchart.ts b/src/router/modules/flowchart.ts
index 5ca8ce090..b8b39f80a 100644
--- a/src/router/modules/flowchart.ts
+++ b/src/router/modules/flowchart.ts
@@ -6,7 +6,7 @@ const flowChartRouter = {
   component: Layout,
   redirect: "/flowChart/index",
   meta: {
-    icon: "el-icon-set-up",
+    icon: "SetUp",
     title: "message.hsflowChart",
     showLink: true,
     rank: 1
diff --git a/src/router/modules/home.ts b/src/router/modules/home.ts
index 6308ed409..5b5bd17a6 100644
--- a/src/router/modules/home.ts
+++ b/src/router/modules/home.ts
@@ -6,7 +6,7 @@ const homeRouter = {
   component: Layout,
   redirect: "/welcome",
   meta: {
-    icon: "el-icon-s-home",
+    icon: "HomeFilled",
     showLink: true,
     rank: 0
   },
diff --git a/src/router/modules/nested.ts b/src/router/modules/nested.ts
index 62e5bd01d..6ec506570 100644
--- a/src/router/modules/nested.ts
+++ b/src/router/modules/nested.ts
@@ -7,7 +7,7 @@ const nestedRouter = {
   name: "Nested",
   meta: {
     title: "message.hsmenus",
-    icon: "el-icon-s-data",
+    icon: "Histogram",
     showLink: true,
     rank: 5
   },
diff --git a/src/router/modules/remaining.ts b/src/router/modules/remaining.ts
index 5af3e1c43..91a7b9ba7 100644
--- a/src/router/modules/remaining.ts
+++ b/src/router/modules/remaining.ts
@@ -26,7 +26,7 @@ const remainingRouter = [
     name: "redirect",
     component: Layout,
     meta: {
-      icon: "el-icon-s-home",
+      icon: "HomeFilled",
       title: "message.hshome",
       showLink: false,
       rank: 104
diff --git a/src/style/sidebar.scss b/src/style/sidebar.scss
index 90ecdc304..6628a9b50 100644
--- a/src/style/sidebar.scss
+++ b/src/style/sidebar.scss
@@ -24,6 +24,10 @@
     }
   }
 
+  .el-sub-menu__icon-arrow {
+    position: absolute;
+  }
+
   .main-container {
     height: 100vh;
     min-height: 100%;