diff --git a/src/components/Icon/Icon.vue b/src/components/Icon/Icon.vue
index a686241..4f58752 100644
--- a/src/components/Icon/Icon.vue
+++ b/src/components/Icon/Icon.vue
@@ -5,7 +5,7 @@
 
 import { Icon } from 'ant-design-vue'
 const IconFont = Icon.createFromIconfontCN({
-  scriptUrl: '//at.alicdn.com/t/font_2024484_85344xmpzhm.js'
+  scriptUrl: '//at.alicdn.com/t/font_2024484_3jr9049cc2f.js'
 })
 
 export default {
diff --git a/src/components/select/icon.vue b/src/components/select/icon.vue
new file mode 100644
index 0000000..944c729
--- /dev/null
+++ b/src/components/select/icon.vue
@@ -0,0 +1,125 @@
+<template>
+  <el-popover
+    ref="popover"
+    placement="bottom-start"
+    popper-class="al-icon-picker-popper"
+    width="400"
+    trigger="click"
+    @show="showPopover"
+    @hide="hidePopover"
+  >
+    <el-tabs v-model="activeName" @tab-click="handleTabClick">
+      <el-tab-pane label="本地" name="first" >
+        <icon-list :icon-list="iconList" :select="select"></icon-list>
+      </el-tab-pane>
+      <el-tab-pane label="iconfont" name="second">
+        <icon-list :icon-list="iconfontList" :select="select"></icon-list>
+      </el-tab-pane>
+      <el-tab-pane label="其他" name="third">
+
+      </el-tab-pane>
+    </el-tabs>
+    <div slot="reference" :class="{'al-icon-picker': true, 'al-icon-picker-open': pickerOpen}"
+         @mouseenter="hovering = true"
+         @mouseleave="hovering = false">
+      <el-input
+        type="text"
+        clearable
+        readonly
+        v-model="currentValue"
+        placeholder="请选择图标"
+      >
+        <span slot="prefix" class="el-input__prefix-inner">
+            <svg-icon :icon-class="currentValue"></svg-icon>
+          </span>
+          <span slot="suffix" class="el-input__suffix-inner">
+            <i v-if="hovering && currentValue.length > 0"
+               class="el-input__icon el-icon-circle-close el-input__clear"
+               @mousedown.prevent
+               @click.stop.prevent="handleClear"
+            ></i>
+            <i v-else class="el-select__caret el-input__icon el-icon-arrow-down"></i>
+          </span>
+      </el-input>
+    </div>
+  </el-popover>
+</template>
+
+<script>
+import icons from './requireIcons'
+import {icon} from '@/utils/iconfont-find'
+import NewComponent from "@/components/select/iconList";
+import IconList from "@/components/select/iconList";
+
+export default {
+  name: 'IconSelect',
+  components: {IconList, NewComponent},
+  props: {
+    value: {
+      type: String,
+      default: 'sdfsd'
+    }
+  },
+  data() {
+    return {
+      iconList: icons,
+      iconfontList: icon.list,
+      currentValue: this.value,
+      hasValue: true,
+      pickerOpen: false,
+      hovering: false,
+      activeName: 'first'
+    }
+  },
+  watch: {
+    value(val){
+      this.currentValue = val
+    }
+  },
+  mounted() {
+  },
+  methods: {
+    showPopover() {
+      this.pickerOpen = true
+    },
+    hidePopover() {
+      this.pickerOpen = false
+    },
+    select(icon){
+      this.currentValue = icon
+      this.$emit('input', icon)
+      this.$refs.popover.doClose()
+    },
+    handleClear() {
+      this.currentValue = ''
+      this.$emit('input', '')
+    },
+    handleTabClick() {
+
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.al-icon-picker {
+  /deep/ .el-input:not(.is-disabled) {
+    cursor: pointer;
+    .el-input__inner {
+      cursor: pointer;
+    }
+  }
+  /deep/ .el-input__suffix {
+    .el-icon-arrow-down {
+      transition: transform .3s;
+    }
+  }
+}
+.al-icon-picker-open {
+  /deep/ .el-input__suffix {
+    .el-icon-arrow-down {
+      transform: rotate(-180deg);
+    }
+  }
+}
+</style>
diff --git a/src/components/select/iconList.vue b/src/components/select/iconList.vue
new file mode 100644
index 0000000..41f026a
--- /dev/null
+++ b/src/components/select/iconList.vue
@@ -0,0 +1,29 @@
+<template>
+  <el-scrollbar style="height: 280px">
+    <el-row>
+      <el-col :span="4" v-for="(item, index) in iconList" :key="index">
+        <el-card shadow="hover" class="al-card-border" :title="item">
+          <div class="al-icon-picker-item" @click="select(item)">
+            <svg-icon :icon-class="item"></svg-icon>
+          </div>
+        </el-card>
+      </el-col>
+    </el-row>
+  </el-scrollbar>
+</template>
+<script>
+export default {
+  name: 'IconList',
+  props: {
+    iconList: {
+      type: Array,
+      default: []
+    },
+  },
+  methods: {
+    select(item) {
+      this.$emit('select', item)
+    }
+  }
+}
+</script>
diff --git a/src/components/select/requireIcons.js b/src/components/select/requireIcons.js
new file mode 100644
index 0000000..56edb9f
--- /dev/null
+++ b/src/components/select/requireIcons.js
@@ -0,0 +1,10 @@
+const req = require.context('../../icons/svg', false, /\.svg$/)
+const requireAll = requireContext => requireContext.keys()
+
+const re = /\.\/(.*)\.svg/
+
+const icons = requireAll(req).map(i => {
+  return i.match(re)[1]
+})
+
+export default icons
diff --git a/src/styles/index.scss b/src/styles/index.scss
index 9b1f72d..c3c8b80 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -102,3 +102,49 @@ div:focus {
 .fade-leave-active {
   transition: opacity 0.5s;
 }
+.al-icon-picker-popper.el-popover {
+  max-width: 100%;
+  padding: 4px 3px 15px 15px;
+}
+.al-icon-picker-popper {
+  .popper__arrow {
+    left: 35px!important;
+  }
+  .el-card {
+    margin: 10px 12px 0 0;
+  }
+  .el-scrollbar__wrap {
+    overflow-x: hidden;
+    margin-right: 0!important;
+    &::-webkit-scrollbar {
+      width: 0;
+      height: 0;
+    }
+  }
+  .el-scrollbar__bar.is-vertical{
+    width: 6px!important;
+  }
+  .el-tabs .el-tabs__header {
+    margin: 0;
+  }
+  .el-card__body {
+    padding: 0;
+  }
+  .el-tabs .el-tabs__item {
+    padding: 0 12px!important;
+  }
+  .al-icon-picker-item {
+    display: block;
+    padding: 8px 0;
+    font-size: 20px;
+    text-align: center;
+    transition: transform .1s;
+    cursor: pointer;
+  }
+  .al-icon-picker-item:hover {
+    transform: scale(1.5);
+  }
+}
+.al-card-border {
+  border: 1px solid #ededed;
+}
diff --git a/src/styles/setting.scss b/src/styles/setting.scss
index badfb73..ebdea49 100644
--- a/src/styles/setting.scss
+++ b/src/styles/setting.scss
@@ -31,6 +31,9 @@ a:hover {
     }
   }
 }
+/deep/.el-dialog__headerbtn {
+  top: unset;
+}
 /deep/.el-card__body {
   padding: 15px;
 }
diff --git a/src/utils/iconfont-find.js b/src/utils/iconfont-find.js
new file mode 100644
index 0000000..79848fd
--- /dev/null
+++ b/src/utils/iconfont-find.js
@@ -0,0 +1,11 @@
+// 把此段代码贴到iconfont项目页面的控制台中, 以获取图标列表
+
+const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
+ const iconNames = nodeArray.map(item => item.outerText.replace('icon-',''))
+ console.log(iconNames.slice(0,80))
+console.log(iconNames.slice(80,130))
+
+export const icon = {
+  list: ["emoji-a", "emoji-bizui", "emoji-baiyan", "emoji-aixin", "emoji-dajing", "emoji-ziya", "emoji-daxiao", "emoji-esi", "emoji-fadai", "emoji-fankun", "emoji-ganga", "emoji-fennu", "emoji-hanyan", "emoji-jingkong", "emoji-haochi", "emoji-emo", "emoji-jingsong", "emoji-jingya", "emoji-kaixin", "emoji-lengku", "emoji-danao", "emoji-liukoushui", "emoji-liulei", "emoji-mengbi", "mianwubiaoqing", "nanguo", "shuizhuo", "taoyan", "tanchi", "siliao", "tiaopi", "xiaochulei", "wuliao", "xingxingyan", "xieyan", "xiasi", "xiaolian", "ku", "shengqi", "yousiliao", "en", "bushufu", "bianbian", "fankun1", "feiwen", "ganmao", "huaixiao", "liuhan", "outu", "keshui", "renzhe", "santiaoxian", "guaiwu", "shoushang", "tianshi", "shuai", "xianwen", "xiaodiaodaya", "xiong", "yiwen", "yun", "liubixie", "shimo", "dianzan", "biti", "fendou", "huqi", "heng", "kulou", "leng", "taoyan1", "shuixing", "aini", "aixin1", "zhadan", "xinsui", "maren", "zhutou", "qie", "youling",
+    "apple-fill", "attachment", "android-fill", "apple", "download", "arrow-up-circle", "arrow-right-circle", "arrow-down", "ashbin", "add", "file_music", "menu", "role", "jiaoseguanli", "yemianshezhi", "drop_down", "yuandian", "tag", "service-directory", "fabu", "wailian", "bianji-", "WEBSITE", "wangzhanguanli", "Up", "up", "fenlei", "guanlizhuanjiawenzhang", "pifu", "tuichudenglu", "shezhi", "wangzhan", "huaban", "yunshezhi", "UserSettings", "blogger", "biaoqian", "myself", "guidang", "quxiaoyulan1-copy", "yulan-copy", "quxiaoyulan1", "yulan"]
+}
diff --git a/src/views/setting/sys/menuManager.vue b/src/views/setting/sys/menuManager.vue
index 85cf95a..2c6a5e0 100644
--- a/src/views/setting/sys/menuManager.vue
+++ b/src/views/setting/sys/menuManager.vue
@@ -17,8 +17,11 @@
             <el-form-item label="菜单名称:" prop="name">
               <el-input placeholder="请输入菜单名称" v-model="form.name" />
             </el-form-item>
-            <el-form-item label="菜单图片:" prop="icon">
-              <el-input placeholder="请输入菜单图片" v-model="form.icon" />
+<!--            <el-form-item label="菜单图标:" prop="icon">-->
+<!--              <el-input placeholder="请输入菜单图标" v-model="form.icon" />-->
+<!--            </el-form-item>-->
+            <el-form-item label="菜单图标:" prop="icon">
+              <icon-select v-model="form.icon"></icon-select>
             </el-form-item>
             <el-form-item label="路由地址:" prop="path">
               <el-input placeholder="请输入路由地址" v-model="form.path" />
@@ -107,9 +110,11 @@
 import menuApi from '@/api/menu'
 import TableList from "@/components/table/TableList";
 import TreeSelect from "@/components/select/tree";
+import IconSelect from "@/components/select/icon";
 
 export default {
     components: {
+      IconSelect,
       TreeSelect,
       TableList
     },
diff --git a/src/views/setting/sys/roleManager.vue b/src/views/setting/sys/roleManager.vue
index 93aacbc..d47d5a5 100644
--- a/src/views/setting/sys/roleManager.vue
+++ b/src/views/setting/sys/roleManager.vue
@@ -234,11 +234,18 @@ export default {
       },
       // 保存分配权限
       saveAuth() {
+
+        const nodeArray = Array.from(document.querySelectorAll('.block-icon-list .icon-item .icon-code.icon-code-show'));
+        const names = nodeArray.map(item => item.outerText)
+        console.log(names)
+
         this.form.menuIds = this.$refs.authTree.getCheckedKeys()
         this.updateRole(this.setFormData())
       },
       // 分配权限
       authorization(roleId) {
+        const req = require.context('@/icons/svg', false, /\.svg$/)
+        console.log(req)
         this.dialogAuthVisible = true
         const findIndex = this.dataList.findIndex(data => data.id === roleId)
         const role = this.dataList[findIndex]