diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json
index fc15b2e15..1670dd7ef 100644
--- a/ruoyi-ui/package.json
+++ b/ruoyi-ui/package.json
@@ -42,6 +42,7 @@
     "core-js": "3.19.1",
     "echarts": "4.9.0",
     "element-ui": "2.15.6",
+    "font-awesome": "^4.7.0",
     "file-saver": "2.0.5",
     "fuse.js": "6.4.3",
     "highlight.js": "9.18.5",
diff --git a/ruoyi-ui/src/assets/styles/element-ui.scss b/ruoyi-ui/src/assets/styles/element-ui.scss
index 363092a63..23173d126 100644
--- a/ruoyi-ui/src/assets/styles/element-ui.scss
+++ b/ruoyi-ui/src/assets/styles/element-ui.scss
@@ -53,6 +53,22 @@
   position: relative;
   margin: 0 auto;
 }
+/** 全局修改 - 不能响应式变化窗口 */
+//.el-dialog {
+//  position: absolute;
+//  top: 50%;
+//  left: 50%;
+//  margin: 0 !important;
+//  transform: translate(-50%, -50%);
+//  max-height: calc(100% - 30px);
+//  max-width: calc(100% - 30px);
+//  display: flex;
+//  flex-direction: column;
+//  > .el-dialog__body {
+//    overflow: auto;
+//    color: #666666;
+//  }
+//}
 
 // refine element ui upload
 .upload-container {
diff --git a/ruoyi-ui/src/assets/styles/ruoyi.scss b/ruoyi-ui/src/assets/styles/ruoyi.scss
index e3912cec8..f71026bc8 100644
--- a/ruoyi-ui/src/assets/styles/ruoyi.scss
+++ b/ruoyi-ui/src/assets/styles/ruoyi.scss
@@ -60,8 +60,39 @@
 	color: inherit;
 }
 
-.el-dialog:not(.is-fullscreen) {
-	margin-top: 6vh !important;
+/** el-dialog弹框 */
+.el-dialog__title {
+    font-weight: bold;
+}
+// 自定义样式
+.custom_dialog {
+    flex-direction: column;
+    justify-content: center;
+    align-items: Center;
+    .el-dialog {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        margin: 0 auto !important;
+        transform: translate(-50%, -50%);
+        max-height: calc(100% - 30px);
+        max-width: calc(100% - 30px);
+        display: flex;
+        flex-direction: column;
+        .el-dialog__body {
+            overflow: hidden;
+            overflow-y: auto;
+        }
+    }
+}
+
+.el-dialog__header {
+    border-bottom: 1px solid #e8e8e8;
+    border-radius: 4px 4px 0 0;
+}
+.el-dialog__footer {
+    border-top: 1px solid #e8e8e8;
+    border-radius: 0 0 4px 4px;
 }
 
 .el-dialog__wrapper.scrollbar .el-dialog .el-dialog__body {
diff --git a/ruoyi-ui/src/components/IconDialogSelect/index.vue b/ruoyi-ui/src/components/IconDialogSelect/index.vue
new file mode 100644
index 000000000..020e85b12
--- /dev/null
+++ b/ruoyi-ui/src/components/IconDialogSelect/index.vue
@@ -0,0 +1,161 @@
+<template>
+  <el-dialog
+    title="图标选择"
+    :close-on-click-modal="false"
+    v-dialog-drag
+    class="custom_dialog"
+    :visible.sync="visible" >
+
+      <el-input v-model="name" style="position: relative; margin-bottom: 10px;" clearable placeholder="请输入图标名称" @clear="filterIcons" @input.native="filterIcons">
+        <i slot="suffix" class="el-icon-search el-input__icon" />
+      </el-input>
+
+      <el-tabs v-model="activeName" type="card" @tab-click="handleTabsClick">
+        <el-tab-pane label="Element图标" name="first">
+          <ul class="icon-list">
+            <li v-for="(item, index) in elementIconList"
+              :key="index" :title="item">
+            <el-button
+              @click="iconActiveHandle(item)"
+              :class="{ 'is-active': item === icon }">
+              <i :class="item"></i>
+            </el-button>
+            </li>
+          </ul>
+        </el-tab-pane>
+        <el-tab-pane label="Font Awesome图标" name="second">
+              <ul class="icon-list">
+                <li v-for="(item, index) in fontAwesomeIconList"
+                  :key="index" :title="item">
+                <el-button
+                  @click="iconActiveHandle(item)"
+                  :class="{ 'is-active': item === icon }">
+                  <i :class="item"></i>
+                </el-button>
+                </li>
+              </ul>
+        </el-tab-pane>
+
+        <el-tab-pane label="自定义图标" name="thirdly">
+          <ul class="icon-list">
+            <li v-for="(item, index) in customIconList"
+                :key="index" :title="item">
+              <el-button
+                @click="iconActiveHandle(item)"
+                :class="{ 'is-active': item == icon }">
+                <svg-icon :icon-class="item" />
+              </el-button>
+            </li>
+          </ul>
+        </el-tab-pane>
+      </el-tabs>
+
+      <span slot="footer" class="dialog-footer">
+        <el-button size="small" @click="visible = false" icon="el-icon-circle-close">关闭</el-button>
+        <el-button size="small"  type="primary" icon="el-icon-circle-check" @click="doSubmit()">确定</el-button>
+      </span>
+  </el-dialog>
+</template>
+
+<script>
+  import elementIcons from '@/utils/icon/elementIcons'
+  import fontAwesomeIcons from '@/utils/icon/fontAwesomeIcons'
+  import customIcons from '@/utils/icon/customIcons'
+  export default {
+    name: 'Icon',
+    data () {
+      return {
+        visible: false,
+        name: '',
+        activeName: 'first',
+        elementIconList: elementIcons,
+        fontAwesomeIconList: fontAwesomeIcons,
+        customIconList: customIcons,
+        icon: ''
+      }
+    },
+    props: {
+      /* 初始值 */
+      value: {
+        type: [String, Number],
+        default: () => { return null }
+      }
+    },
+    watch: {
+      value () {
+        this.icon = this.value
+      }
+    },
+    methods: {
+      // 图标选中
+      iconActiveHandle (iconName) {
+        // 赋值
+        this.icon = iconName
+      },
+      // 查询过滤
+      filterIcons() {
+        let activeName = this.activeName;
+
+        if (activeName == 'first') {
+          this.elementIconList = elementIcons
+
+          if (this.name) {
+            this.elementIconList = this.elementIconList.filter(item => item.includes(this.name))
+          }
+        } else if (activeName == 'second') {
+          this.fontAwesomeIconList = fontAwesomeIcons
+
+          if (this.name) {
+            this.fontAwesomeIconList = this.fontAwesomeIconList.filter(item => item.includes(this.name))
+          }
+        } else if (activeName == 'thirdly') {
+          this.customIconList = customIcons
+
+          if (this.name) {
+            this.customIconList = this.customIconList.filter(item => item.includes(this.name))
+          }
+        }
+      },
+      handleTabsClick() {
+        this.filterIcons()
+      },
+      // 确定提交
+      doSubmit () {
+        this.$emit('getValue', this.icon)
+        this.visible = false
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+ul{
+    margin: 10px 0;
+    padding: 0 0 0 20px;
+    font-size: 14px;
+    color: #5e6d82;
+    line-height: 2em;
+}
+
+ul.icon-list {
+    overflow: hidden;
+    list-style: none;
+    padding: 0!important;
+    border: 1px solid #eaeefb;
+    border-radius: 4px;
+}
+.icon-list li {
+    float: left;
+    width: 10%;
+    text-align: center;
+    height:50px;
+    line-height: 50px;
+    color: #666;
+    font-size: 13px;
+    border-right: 1px solid #eee;
+    border-bottom: 1px solid #eee;
+    margin-right: -1px;
+    margin-bottom: -1px;
+}
+</style>
diff --git a/ruoyi-ui/src/components/SvgIcon/index.vue b/ruoyi-ui/src/components/SvgIcon/index.vue
index 340ace45c..38859596f 100644
--- a/ruoyi-ui/src/components/SvgIcon/index.vue
+++ b/ruoyi-ui/src/components/SvgIcon/index.vue
@@ -1,5 +1,6 @@
 <template>
   <div v-if="isExternal" :style="styleExternalIcon" class="svg-external-icon svg-icon" v-on="$listeners" />
+  <i v-else-if="isFont" :class="fontClass" ></i>
   <svg v-else :class="svgClass" aria-hidden="true" v-on="$listeners">
     <use :xlink:href="iconName" />
   </svg>
@@ -24,9 +25,25 @@ export default {
     isExternal() {
       return isExternal(this.iconClass)
     },
+    isFont() {
+      let flag = false;
+      // 判断图标名前缀是否是下面情况
+      if (this.iconClass.startsWith("el-icon-") || this.iconClass.startsWith("fa fa-")) {
+        flag = true;
+      }
+
+      return flag;
+    },
     iconName() {
       return `#icon-${this.iconClass}`
     },
+    fontClass() {
+      if (this.className) {
+        return 'svg-icon ' + this.className + ' ' + this.iconClass
+      } else {
+        return 'svg-icon' + ' ' + this.iconClass
+      }
+    },
     svgClass() {
       if (this.className) {
         return 'svg-icon ' + this.className
diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js
index ebd94b9d8..41ae39ec1 100644
--- a/ruoyi-ui/src/main.js
+++ b/ruoyi-ui/src/main.js
@@ -7,6 +7,8 @@ import './assets/styles/element-variables.scss'
 
 import '@/assets/styles/index.scss' // global css
 import '@/assets/styles/ruoyi.scss' // ruoyi css
+import 'font-awesome/css/font-awesome.min.css'
+
 import App from './App'
 import store from './store'
 import router from './router'
diff --git a/ruoyi-ui/src/utils/icon/customIcons.js b/ruoyi-ui/src/utils/icon/customIcons.js
new file mode 100644
index 000000000..5d3005df5
--- /dev/null
+++ b/ruoyi-ui/src/utils/icon/customIcons.js
@@ -0,0 +1,11 @@
+
+const req = require.context('../../assets/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/ruoyi-ui/src/utils/icon/elementIcons.js b/ruoyi-ui/src/utils/icon/elementIcons.js
new file mode 100644
index 000000000..db9533ca1
--- /dev/null
+++ b/ruoyi-ui/src/utils/icon/elementIcons.js
@@ -0,0 +1,281 @@
+export default [
+  'el-icon-platform-eleme',
+  'el-icon-eleme',
+  'el-icon-delete-solid',
+  'el-icon-delete',
+  'el-icon-s-tools',
+  'el-icon-setting',
+  'el-icon-user-solid',
+  'el-icon-user',
+  'el-icon-phone',
+  'el-icon-phone-outline',
+  'el-icon-more',
+  'el-icon-more-outline',
+  'el-icon-star-on',
+  'el-icon-star-off',
+  'el-icon-s-goods',
+  'el-icon-goods',
+  'el-icon-warning',
+  'el-icon-warning-outline',
+  'el-icon-question',
+  'el-icon-info',
+  'el-icon-remove',
+  'el-icon-circle-plus',
+  'el-icon-success',
+  'el-icon-error',
+  'el-icon-zoom-in',
+  'el-icon-zoom-out',
+  'el-icon-remove-outline',
+  'el-icon-circle-plus-outline',
+  'el-icon-circle-check',
+  'el-icon-circle-close',
+  'el-icon-s-help',
+  'el-icon-help',
+  'el-icon-minus',
+  'el-icon-plus',
+  'el-icon-check',
+  'el-icon-close',
+  'el-icon-picture',
+  'el-icon-picture-outline',
+  'el-icon-picture-outline-round',
+  'el-icon-upload',
+  'el-icon-upload2',
+  'el-icon-download',
+  'el-icon-camera-solid',
+  'el-icon-camera',
+  'el-icon-video-camera-solid',
+  'el-icon-video-camera',
+  'el-icon-message-solid',
+  'el-icon-bell',
+  'el-icon-s-cooperation',
+  'el-icon-s-order',
+  'el-icon-s-platform',
+  'el-icon-s-fold',
+  'el-icon-s-unfold',
+  'el-icon-s-operation',
+  'el-icon-s-promotion',
+  'el-icon-s-home',
+  'el-icon-s-release',
+  'el-icon-s-ticket',
+  'el-icon-s-management',
+  'el-icon-s-open',
+  'el-icon-s-shop',
+  'el-icon-s-marketing',
+  'el-icon-s-flag',
+  'el-icon-s-comment',
+  'el-icon-s-finance',
+  'el-icon-s-claim',
+  'el-icon-s-custom',
+  'el-icon-s-opportunity',
+  'el-icon-s-data',
+  'el-icon-s-check',
+  'el-icon-s-grid',
+  'el-icon-menu',
+  'el-icon-share',
+  'el-icon-d-caret',
+  'el-icon-caret-left',
+  'el-icon-caret-right',
+  'el-icon-caret-bottom',
+  'el-icon-caret-top',
+  'el-icon-bottom-left',
+  'el-icon-bottom-right',
+  'el-icon-back',
+  'el-icon-right',
+  'el-icon-bottom',
+  'el-icon-top',
+  'el-icon-top-left',
+  'el-icon-top-right',
+  'el-icon-arrow-left',
+  'el-icon-arrow-right',
+  'el-icon-arrow-down',
+  'el-icon-arrow-up',
+  'el-icon-d-arrow-left',
+  'el-icon-d-arrow-right',
+  'el-icon-video-pause',
+  'el-icon-video-play',
+  'el-icon-refresh',
+  'el-icon-refresh-right',
+  'el-icon-refresh-left',
+  'el-icon-finished',
+  'el-icon-sort',
+  'el-icon-sort-up',
+  'el-icon-sort-down',
+  'el-icon-rank',
+  'el-icon-loading',
+  'el-icon-view',
+  'el-icon-c-scale-to-original',
+  'el-icon-date',
+  'el-icon-edit',
+  'el-icon-edit-outline',
+  'el-icon-folder',
+  'el-icon-folder-opened',
+  'el-icon-folder-add',
+  'el-icon-folder-remove',
+  'el-icon-folder-delete',
+  'el-icon-folder-checked',
+  'el-icon-tickets',
+  'el-icon-document-remove',
+  'el-icon-document-delete',
+  'el-icon-document-copy',
+  'el-icon-document-checked',
+  'el-icon-document',
+  'el-icon-document-add',
+  'el-icon-printer',
+  'el-icon-paperclip',
+  'el-icon-takeaway-box',
+  'el-icon-search',
+  'el-icon-monitor',
+  'el-icon-attract',
+  'el-icon-mobile',
+  'el-icon-scissors',
+  'el-icon-umbrella',
+  'el-icon-headset',
+  'el-icon-brush',
+  'el-icon-mouse',
+  'el-icon-coordinate',
+  'el-icon-magic-stick',
+  'el-icon-reading',
+  'el-icon-data-line',
+  'el-icon-data-board',
+  'el-icon-pie-chart',
+  'el-icon-data-analysis',
+  'el-icon-collection-tag',
+  'el-icon-film',
+  'el-icon-suitcase',
+  'el-icon-suitcase-1',
+  'el-icon-receiving',
+  'el-icon-collection',
+  'el-icon-files',
+  'el-icon-notebook-1',
+  'el-icon-notebook-2',
+  'el-icon-toilet-paper',
+  'el-icon-office-building',
+  'el-icon-school',
+  'el-icon-table-lamp',
+  'el-icon-house',
+  'el-icon-no-smoking',
+  'el-icon-smoking',
+  'el-icon-shopping-cart-full',
+  'el-icon-shopping-cart-1',
+  'el-icon-shopping-cart-2',
+  'el-icon-shopping-bag-1',
+  'el-icon-shopping-bag-2',
+  'el-icon-sold-out',
+  'el-icon-sell',
+  'el-icon-present',
+  'el-icon-box',
+  'el-icon-bank-card',
+  'el-icon-money',
+  'el-icon-coin',
+  'el-icon-wallet',
+  'el-icon-discount',
+  'el-icon-price-tag',
+  'el-icon-news',
+  'el-icon-guide',
+  'el-icon-male',
+  'el-icon-female',
+  'el-icon-thumb',
+  'el-icon-cpu',
+  'el-icon-link',
+  'el-icon-connection',
+  'el-icon-open',
+  'el-icon-turn-off',
+  'el-icon-set-up',
+  'el-icon-chat-round',
+  'el-icon-chat-line-round',
+  'el-icon-chat-square',
+  'el-icon-chat-dot-round',
+  'el-icon-chat-dot-square',
+  'el-icon-chat-line-square',
+  'el-icon-message',
+  'el-icon-postcard',
+  'el-icon-position',
+  'el-icon-turn-off-microphone',
+  'el-icon-microphone',
+  'el-icon-close-notification',
+  'el-icon-bangzhu',
+  'el-icon-time',
+  'el-icon-odometer',
+  'el-icon-crop',
+  'el-icon-aim',
+  'el-icon-switch-button',
+  'el-icon-full-screen',
+  'el-icon-copy-document',
+  'el-icon-mic',
+  'el-icon-stopwatch',
+  'el-icon-medal-1',
+  'el-icon-medal',
+  'el-icon-trophy',
+  'el-icon-trophy-1',
+  'el-icon-first-aid-kit',
+  'el-icon-discover',
+  'el-icon-place',
+  'el-icon-location',
+  'el-icon-location-outline',
+  'el-icon-location-information',
+  'el-icon-add-location',
+  'el-icon-delete-location',
+  'el-icon-map-location',
+  'el-icon-alarm-clock',
+  'el-icon-timer',
+  'el-icon-watch-1',
+  'el-icon-watch',
+  'el-icon-lock',
+  'el-icon-unlock',
+  'el-icon-key',
+  'el-icon-service',
+  'el-icon-mobile-phone',
+  'el-icon-bicycle',
+  'el-icon-truck',
+  'el-icon-ship',
+  'el-icon-basketball',
+  'el-icon-football',
+  'el-icon-soccer',
+  'el-icon-baseball',
+  'el-icon-wind-power',
+  'el-icon-light-rain',
+  'el-icon-lightning',
+  'el-icon-heavy-rain',
+  'el-icon-sunrise',
+  'el-icon-sunrise-1',
+  'el-icon-sunset',
+  'el-icon-sunny',
+  'el-icon-cloudy',
+  'el-icon-partly-cloudy',
+  'el-icon-cloudy-and-sunny',
+  'el-icon-moon',
+  'el-icon-moon-night',
+  'el-icon-dish',
+  'el-icon-dish-1',
+  'el-icon-food',
+  'el-icon-chicken',
+  'el-icon-fork-spoon',
+  'el-icon-knife-fork',
+  'el-icon-burger',
+  'el-icon-tableware',
+  'el-icon-sugar',
+  'el-icon-dessert',
+  'el-icon-ice-cream',
+  'el-icon-hot-water',
+  'el-icon-water-cup',
+  'el-icon-coffee-cup',
+  'el-icon-cold-drink',
+  'el-icon-goblet',
+  'el-icon-goblet-full',
+  'el-icon-goblet-square',
+  'el-icon-goblet-square-full',
+  'el-icon-refrigerator',
+  'el-icon-grape',
+  'el-icon-watermelon',
+  'el-icon-cherry',
+  'el-icon-apple',
+  'el-icon-pear',
+  'el-icon-orange',
+  'el-icon-coffee',
+  'el-icon-ice-tea',
+  'el-icon-ice-drink',
+  'el-icon-milk-tea',
+  'el-icon-potato-strips',
+  'el-icon-lollipop',
+  'el-icon-ice-cream-square',
+  'el-icon-ice-cream-round']
diff --git a/ruoyi-ui/src/utils/icon/fontAwesomeIcons.js b/ruoyi-ui/src/utils/icon/fontAwesomeIcons.js
new file mode 100644
index 000000000..e5326d54a
--- /dev/null
+++ b/ruoyi-ui/src/utils/icon/fontAwesomeIcons.js
@@ -0,0 +1,774 @@
+export default [
+  'fa fa-american-sign-language-interpreting',
+  'fa fa-asl-interpreting',
+  'fa fa-assistive-listening-systems',
+  'fa fa-audio-description',
+  'fa fa-blind',
+  'fa fa-address-card-o',
+  'fa fa-braille',
+  'fa fa-deaf',
+  'fa fa-deafness',
+  'fa fa-envira',
+  'fa fa-first-order',
+  'fa fa-gitlab',
+  'fa fa-glide',
+  'fa fa-glide-g',
+  'fa fa-hard-of-hearing',
+  'fa fa-low-vision',
+  'fa fa-pied-piper',
+  'fa fa-question-circle-o',
+  'fa fa-sign-language',
+  'fa fa-signing',
+  'fa fa-snapchat',
+  'fa fa-snapchat-ghost',
+  'fa fa-snapchat-square',
+  'fa fa-themeisle',
+  'fa fa-universal-access',
+  'fa fa-viadeo',
+  'fa fa-viadeo-square',
+  'fa fa-volume-control-phone',
+  'fa fa-wheelchair-alt',
+  'fa fa-wpbeginner',
+  'fa fa-wpforms',
+  'fa fa-yoast',
+  'fa fa-font-awesome',
+  'fa fa-google-plus-official',
+  'fa fa-bluetooth',
+  'fa fa-bluetooth-b',
+  'fa fa-codiepie',
+  'fa fa-credit-card-alt',
+  'fa fa-edge',
+  'fa fa-fort-awesome',
+  'fa fa-hashtag',
+  'fa fa-mixcloud',
+  'fa fa-modx',
+  'fa fa-pause-circle',
+  'fa fa-pause-circle-o',
+  'fa fa-percent',
+  'fa fa-product-hunt',
+  'fa fa-reddit-alien',
+  'fa fa-scribd',
+  'fa fa-shopping-bag',
+  'fa fa-shopping-basket',
+  'fa fa-stop-circle',
+  'fa fa-stop-circle-o',
+  'fa fa-usb',
+  'fa fa-500px',
+  'fa fa-amazon',
+  'fa fa-balance-scale',
+  'fa fa-battery-0',
+  'fa fa-battery-1',
+  'fa fa-battery-2',
+  'fa fa-battery-3',
+  'fa fa-battery-4',
+  'fa fa-battery-empty',
+  'fa fa-battery-full',
+  'fa fa-battery-half',
+  'fa fa-battery-quarter',
+  'fa fa-battery-three-quarters',
+  'fa fa-black-tie',
+  'fa fa-calendar-check-o',
+  'fa fa-calendar-minus-o',
+  'fa fa-calendar-plus-o',
+  'fa fa-calendar-times-o',
+  'fa fa-cc-diners-club',
+  'fa fa-cc-jcb',
+  'fa fa-chrome',
+  'fa fa-clone',
+  'fa fa-commenting',
+  'fa fa-commenting-o',
+  'fa fa-contao',
+  'fa fa-creative-commons',
+  'fa fa-expeditedssl',
+  'fa fa-firefox',
+  'fa fa-fonticons',
+  'fa fa-genderless',
+  'fa fa-get-pocket',
+  'fa fa-gg',
+  'fa fa-gg-circle',
+  'fa fa-hand-grab-o',
+  'fa fa-hand-lizard-o',
+  'fa fa-hand-paper-o',
+  'fa fa-hand-peace-o',
+  'fa fa-hand-pointer-o',
+  'fa fa-hand-rock-o',
+  'fa fa-hand-scissors-o',
+  'fa fa-hand-spock-o',
+  'fa fa-hand-stop-o',
+  'fa fa-hourglass',
+  'fa fa-hourglass-1',
+  'fa fa-hourglass-2',
+  'fa fa-hourglass-3',
+  'fa fa-hourglass-end',
+  'fa fa-hourglass-half',
+  'fa fa-hourglass-o',
+  'fa fa-hourglass-start',
+  'fa fa-houzz',
+  'fa fa-i-cursor',
+  'fa fa-industry',
+  'fa fa-internet-explorer',
+  'fa fa-map',
+  'fa fa-map-o',
+  'fa fa-map-pin',
+  'fa fa-map-signs',
+  'fa fa-mouse-pointer',
+  'fa fa-object-group',
+  'fa fa-object-ungroup',
+  'fa fa-odnoklassniki',
+  'fa fa-odnoklassniki-square',
+  'fa fa-opencart',
+  'fa fa-opera',
+  'fa fa-optin-monster',
+  'fa fa-registered',
+  'fa fa-safari',
+  'fa fa-sticky-note',
+  'fa fa-sticky-note-o',
+  'fa fa-television',
+  'fa fa-trademark',
+  'fa fa-tripadvisor',
+  'fa fa-tv',
+  'fa fa-vimeo',
+  'fa fa-wikipedia-w',
+  'fa fa-y-combinator',
+  'fa fa-yc',
+  'fa fa-bed',
+  'fa fa-buysellads',
+  'fa fa-cart-arrow-down',
+  'fa fa-cart-plus',
+  'fa fa-connectdevelop',
+  'fa fa-dashcube',
+  'fa fa-diamond',
+  'fa fa-facebook-official',
+  'fa fa-forumbee',
+  'fa fa-heartbeat',
+  'fa fa-bed',
+  'fa fa-leanpub',
+  'fa fa-mars',
+  'fa fa-mars-double',
+  'fa fa-mars-stroke',
+  'fa fa-mars-stroke-h',
+  'fa fa-mars-stroke-v',
+  'fa fa-medium',
+  'fa fa-mercury',
+  'fa fa-motorcycle',
+  'fa fa-neuter',
+  'fa fa-pinterest-p',
+  'fa fa-sellsy',
+  'fa fa-server',
+  'fa fa-ship',
+  'fa fa-shirtsinbulk',
+  'fa fa-simplybuilt',
+  'fa fa-skyatlas',
+  'fa fa-street-view',
+  'fa fa-subway',
+  'fa fa-train',
+  'fa fa-transgender',
+  'fa fa-transgender-alt',
+  'fa fa-user-plus',
+  'fa fa-user-secret',
+  'fa fa-user-times',
+  'fa fa-venus',
+  'fa fa-venus-double',
+  'fa fa-venus-mars',
+  'fa fa-viacoin',
+  'fa fa-whatsapp',
+  'fa fa-angellist',
+  'fa fa-area-chart',
+  'fa fa-at',
+  'fa fa-bell-slash',
+  'fa fa-bell-slash-o',
+  'fa fa-bicycle',
+  'fa fa-binoculars',
+  'fa fa-birthday-cake',
+  'fa fa-bus',
+  'fa fa-calculator',
+  'fa fa-cc',
+  'fa fa-cc-amex',
+  'fa fa-cc-discover',
+  'fa fa-cc-mastercard',
+  'fa fa-cc-paypal',
+  'fa fa-cc-stripe',
+  'fa fa-cc-visa',
+  'fa fa-copyright',
+  'fa fa-eyedropper',
+  'fa fa-futbol-o',
+  'fa fa-google-wallet',
+  'fa fa-ils',
+  'fa fa-ioxhost',
+  'fa fa-lastfm',
+  'fa fa-lastfm-square',
+  'fa fa-line-chart',
+  'fa fa-meanpath',
+  'fa fa-newspaper-o',
+  'fa fa-paint-brush',
+  'fa fa-paypal',
+  'fa fa-pie-chart',
+  'fa fa-plug',
+  'fa fa-shekel',
+  'fa fa-sheqel',
+  'fa fa-slideshare',
+  'fa fa-soccer-ball-o',
+  'fa fa-toggle-off',
+  'fa fa-toggle-on',
+  'fa fa-trash',
+  'fa fa-tty',
+  'fa fa-twitch',
+  'fa fa-wifi',
+  'fa fa-yelp',
+  'fa fa-adjust',
+  'fa fa-anchor',
+  'fa fa-archive',
+  'fa fa-arrows',
+  'fa fa-arrows-h',
+  'fa fa-arrows-v',
+  'fa fa-asterisk',
+  'fa fa-automobile',
+  'fa fa-ban',
+  'fa fa-bank',
+  'fa fa-bar-chart-o',
+  'fa fa-barcode',
+  'fa fa-bars',
+  'fa fa-beer',
+  'fa fa-bell',
+  'fa fa-bell-o',
+  'fa fa-bolt',
+  'fa fa-bomb',
+  'fa fa-book',
+  'fa fa-bookmark',
+  'fa fa-bookmark-o',
+  'fa fa-briefcase',
+  'fa fa-bug',
+  'fa fa-building',
+  'fa fa-building-o',
+  'fa fa-bullhorn',
+  'fa fa-bullseye',
+  'fa fa-cab',
+  'fa fa-calendar',
+  'fa fa-calendar-o',
+  'fa fa-camera',
+  'fa fa-camera-retro',
+  'fa fa-car',
+  'fa fa-caret-square-o-down',
+  'fa fa-caret-square-o-left',
+  'fa fa-caret-square-o-right',
+  'fa fa-caret-square-o-up',
+  'fa fa-certificate',
+  'fa fa-check',
+  'fa fa-check-circle',
+  'fa fa-check-circle-o',
+  'fa fa-check-square',
+  'fa fa-check-square-o',
+  'fa fa-child',
+  'fa fa-circle',
+  'fa fa-circle-o',
+  'fa fa-circle-o-notch',
+  'fa fa-circle-thin',
+  'fa fa-clock-o',
+  'fa fa-cloud',
+  'fa fa-cloud-download',
+  'fa fa-cloud-upload',
+  'fa fa-code',
+  'fa fa-code-fork',
+  'fa fa-coffee',
+  'fa fa-cog',
+  'fa fa-cogs',
+  'fa fa-comment',
+  'fa fa-comment-o',
+  'fa fa-comments',
+  'fa fa-comments-o',
+  'fa fa-compass',
+  'fa fa-credit-card',
+  'fa fa-crop',
+  'fa fa-crosshairs',
+  'fa fa-cube',
+  'fa fa-cubes',
+  'fa fa-cutlery',
+  'fa fa-dashboard',
+  'fa fa-database',
+  'fa fa-desktop',
+  'fa fa-dot-circle-o',
+  'fa fa-download',
+  'fa fa-edit',
+  'fa fa-ellipsis-h',
+  'fa fa-ellipsis-v',
+  'fa fa-envelope',
+  'fa fa-envelope-o',
+  'fa fa-envelope-square',
+  'fa fa-eraser',
+  'fa fa-exchange',
+  'fa fa-exclamation',
+  'fa fa-exclamation-circle',
+  'fa fa-exclamation-triangle',
+  'fa fa-external-link',
+  'fa fa-external-link-square',
+  'fa fa-eye',
+  'fa fa-eye-slash',
+  'fa fa-fax',
+  'fa fa-female',
+  'fa fa-fighter-jet',
+  'fa fa-file-archive-o',
+  'fa fa-file-audio-o',
+  'fa fa-file-code-o',
+  'fa fa-file-excel-o',
+  'fa fa-file-image-o',
+  'fa fa-file-movie-o',
+  'fa fa-file-pdf-o',
+  'fa fa-file-photo-o',
+  'fa fa-file-picture-o',
+  'fa fa-file-powerpoint-o',
+  'fa fa-file-sound-o',
+  'fa fa-file-video-o',
+  'fa fa-file-word-o',
+  'fa fa-file-zip-o',
+  'fa fa-film',
+  'fa fa-filter',
+  'fa fa-fire',
+  'fa fa-fire-extinguisher',
+  'fa fa-flag',
+  'fa fa-flag-checkered',
+  'fa fa-flag-o',
+  'fa fa-flash',
+  'fa fa-flask',
+  'fa fa-folder',
+  'fa fa-folder-o',
+  'fa fa-folder-open',
+  'fa fa-folder-open-o',
+  'fa fa-frown-o',
+  'fa fa-gamepad',
+  'fa fa-gavel',
+  'fa fa-gear',
+  'fa fa-gears',
+  'fa fa-gift',
+  'fa fa-glass',
+  'fa fa-globe',
+  'fa fa-graduation-cap',
+  'fa fa-group',
+  'fa fa-hdd-o',
+  'fa fa-headphones',
+  'fa fa-heart',
+  'fa fa-heart-o',
+  'fa fa-history',
+  'fa fa-home',
+  'fa fa-image',
+  'fa fa-inbox',
+  'fa fa-info',
+  'fa fa-info-circle',
+  'fa fa-institution',
+  'fa fa-key',
+  'fa fa-keyboard-o',
+  'fa fa-language',
+  'fa fa-laptop',
+  'fa fa-leaf',
+  'fa fa-legal',
+  'fa fa-lemon-o',
+  'fa fa-level-down',
+  'fa fa-level-up',
+  'fa fa-life-bouy',
+  'fa fa-life-ring',
+  'fa fa-life-saver',
+  'fa fa-lightbulb-o',
+  'fa fa-location-arrow',
+  'fa fa-lock',
+  'fa fa-magic',
+  'fa fa-magnet',
+  'fa fa-mail-forward',
+  'fa fa-mail-reply',
+  'fa fa-mail-reply-all',
+  'fa fa-male',
+  'fa fa-map-marker',
+  'fa fa-meh-o',
+  'fa fa-microphone',
+  'fa fa-microphone-slash',
+  'fa fa-minus',
+  'fa fa-minus-circle',
+  'fa fa-minus-square',
+  'fa fa-minus-square-o',
+  'fa fa-mobile',
+  'fa fa-mobile-phone',
+  'fa fa-money',
+  'fa fa-moon-o',
+  'fa fa-mortar-board',
+  'fa fa-music',
+  'fa fa-navicon',
+  'fa fa-paper-plane',
+  'fa fa-paper-plane-o',
+  'fa fa-paw',
+  'fa fa-pencil',
+  'fa fa-pencil-square',
+  'fa fa-pencil-square-o',
+  'fa fa-phone',
+  'fa fa-phone-square',
+  'fa fa-photo',
+  'fa fa-picture-o',
+  'fa fa-plane',
+  'fa fa-plus',
+  'fa fa-plus-circle',
+  'fa fa-plus-square',
+  'fa fa-plus-square-o',
+  'fa fa-power-off',
+  'fa fa-print',
+  'fa fa-puzzle-piece',
+  'fa fa-qrcode',
+  'fa fa-question',
+  'fa fa-question-circle',
+  'fa fa-quote-left',
+  'fa fa-quote-right',
+  'fa fa-random',
+  'fa fa-recycle',
+  'fa fa-refresh',
+  'fa fa-reorder',
+  'fa fa-reply',
+  'fa fa-reply-all',
+  'fa fa-retweet',
+  'fa fa-road',
+  'fa fa-rocket',
+  'fa fa-rss',
+  'fa fa-rss-square',
+  'fa fa-search',
+  'fa fa-search-minus',
+  'fa fa-search-plus',
+  'fa fa-send',
+  'fa fa-send-o',
+  'fa fa-share',
+  'fa fa-share-alt',
+  'fa fa-share-alt-square',
+  'fa fa-share-square',
+  'fa fa-share-square-o',
+  'fa fa-shield',
+  'fa fa-shopping-cart',
+  'fa fa-sign-in',
+  'fa fa-sign-out',
+  'fa fa-signal',
+  'fa fa-sitemap',
+  'fa fa-sliders',
+  'fa fa-smile-o',
+  'fa fa-sort',
+  'fa fa-sort-alpha-asc',
+  'fa fa-sort-alpha-desc',
+  'fa fa-sort-amount-asc',
+  'fa fa-sort-amount-desc',
+  'fa fa-sort-asc',
+  'fa fa-sort-desc',
+  'fa fa-sort-down',
+  'fa fa-sort-numeric-asc',
+  'fa fa-sort-numeric-desc',
+  'fa fa-sort-up',
+  'fa fa-space-shuttle',
+  'fa fa-spinner',
+  'fa fa-spoon',
+  'fa fa-square',
+  'fa fa-square-o',
+  'fa fa-star',
+  'fa fa-star-half',
+  'fa fa-star-half-empty',
+  'fa fa-star-half-full',
+  'fa fa-star-half-o',
+  'fa fa-star-o',
+  'fa fa-suitcase',
+  'fa fa-sun-o',
+  'fa fa-support',
+  'fa fa-tablet',
+  'fa fa-tachometer',
+  'fa fa-tag',
+  'fa fa-tags',
+  'fa fa-tasks',
+  'fa fa-taxi',
+  'fa fa-terminal',
+  'fa fa-thumb-tack',
+  'fa fa-thumbs-down',
+  'fa fa-thumbs-o-down',
+  'fa fa-thumbs-o-up',
+  'fa fa-thumbs-up',
+  'fa fa-ticket',
+  'fa fa-times',
+  'fa fa-times-circle',
+  'fa fa-times-circle-o',
+  'fa fa-tint',
+  'fa fa-toggle-down',
+  'fa fa-toggle-left',
+  'fa fa-toggle-right',
+  'fa fa-toggle-up',
+  'fa fa-trash-o',
+  'fa fa-tree',
+  'fa fa-trophy',
+  'fa fa-truck',
+  'fa fa-umbrella',
+  'fa fa-university',
+  'fa fa-unlock',
+  'fa fa-unlock-alt',
+  'fa fa-unsorted',
+  'fa fa-upload',
+  'fa fa-user',
+  'fa fa-users',
+  'fa fa-video-camera',
+  'fa fa-volume-down',
+  'fa fa-volume-off',
+  'fa fa-volume-up',
+  'fa fa-warning',
+  'fa fa-wheelchair',
+  'fa fa-wrench',
+  'fa fa-file',
+  'fa fa-file-archive-o',
+  'fa fa-file-audio-o',
+  'fa fa-file-code-o',
+  'fa fa-file-excel-o',
+  'fa fa-file-image-o',
+  'fa fa-file-movie-o',
+  'fa fa-file-o',
+  'fa fa-file-pdf-o',
+  'fa fa-file-photo-o',
+  'fa fa-file-picture-o',
+  'fa fa-file-powerpoint-o',
+  'fa fa-file-sound-o',
+  'fa fa-file-text',
+  'fa fa-file-text-o',
+  'fa fa-file-video-o',
+  'fa fa-file-word-o',
+  'fa fa-file-zip-o',
+  'fa fa-circle-o-notch',
+  'fa fa-cog',
+  'fa fa-gear',
+  'fa fa-refresh',
+  'fa fa-spinner',
+  'fa fa-check-square',
+  'fa fa-check-square-o',
+  'fa fa-circle',
+  'fa fa-circle-o',
+  'fa fa-dot-circle-o',
+  'fa fa-minus-square',
+  'fa fa-minus-square-o',
+  'fa fa-plus-square',
+  'fa fa-plus-square-o',
+  'fa fa-square',
+  'fa fa-square-o',
+  'fa fa-bitcoin',
+  'fa fa-btc',
+  'fa fa-cny',
+  'fa fa-dollar',
+  'fa fa-eur',
+  'fa fa-euro',
+  'fa fa-gbp',
+  'fa fa-inr',
+  'fa fa-jpy',
+  'fa fa-krw',
+  'fa fa-money',
+  'fa fa-rmb',
+  'fa fa-rouble',
+  'fa fa-rub',
+  'fa fa-ruble',
+  'fa fa-rupee',
+  'fa fa-try',
+  'fa fa-turkish-lira',
+  'fa fa-usd',
+  'fa fa-won',
+  'fa fa-yen',
+  'fa fa-align-center',
+  'fa fa-align-justify',
+  'fa fa-align-left',
+  'fa fa-align-right',
+  'fa fa-bold',
+  'fa fa-chain',
+  'fa fa-chain-broken',
+  'fa fa-clipboard',
+  'fa fa-columns',
+  'fa fa-copy',
+  'fa fa-cut',
+  'fa fa-dedent',
+  'fa fa-eraser',
+  'fa fa-file',
+  'fa fa-file-o',
+  'fa fa-file-text',
+  'fa fa-file-text-o',
+  'fa fa-files-o',
+  'fa fa-floppy-o',
+  'fa fa-font',
+  'fa fa-header',
+  'fa fa-indent',
+  'fa fa-italic',
+  'fa fa-link',
+  'fa fa-list',
+  'fa fa-list-alt',
+  'fa fa-list-ol',
+  'fa fa-list-ul',
+  'fa fa-outdent',
+  'fa fa-paperclip',
+  'fa fa-paragraph',
+  'fa fa-paste',
+  'fa fa-repeat',
+  'fa fa-rotate-left',
+  'fa fa-rotate-right',
+  'fa fa-save',
+  'fa fa-scissors',
+  'fa fa-strikethrough',
+  'fa fa-subscript',
+  'fa fa-superscript',
+  'fa fa-table',
+  'fa fa-text-height',
+  'fa fa-text-width',
+  'fa fa-th',
+  'fa fa-th-large',
+  'fa fa-th-list',
+  'fa fa-underline',
+  'fa fa-undo',
+  'fa fa-unlink',
+  'fa fa-angle-double-down',
+  'fa fa-angle-double-left',
+  'fa fa-angle-double-right',
+  'fa fa-angle-double-up',
+  'fa fa-angle-down',
+  'fa fa-angle-left',
+  'fa fa-angle-right',
+  'fa fa-angle-up',
+  'fa fa-arrow-circle-down',
+  'fa fa-arrow-circle-left',
+  'fa fa-arrow-circle-o-down',
+  'fa fa-arrow-circle-o-left',
+  'fa fa-arrow-circle-o-right',
+  'fa fa-arrow-circle-o-up',
+  'fa fa-arrow-circle-right',
+  'fa fa-arrow-circle-up',
+  'fa fa-arrow-down',
+  'fa fa-arrow-left',
+  'fa fa-arrow-right',
+  'fa fa-arrow-up',
+  'fa fa-arrows',
+  'fa fa-arrows-alt',
+  'fa fa-arrows-h',
+  'fa fa-arrows-v',
+  'fa fa-caret-down',
+  'fa fa-caret-left',
+  'fa fa-caret-right',
+  'fa fa-caret-up',
+  'fa fa-caret-square-o-left',
+  'fa fa-caret-square-o-right',
+  'fa fa-caret-square-o-up',
+  'fa fa-caret-square-o-down',
+  'fa fa-chevron-circle-down',
+  'fa fa-chevron-circle-left',
+  'fa fa-chevron-circle-right',
+  'fa fa-chevron-circle-up',
+  'fa fa-chevron-down',
+  'fa fa-chevron-left',
+  'fa fa-chevron-right',
+  'fa fa-chevron-up',
+  'fa fa-hand-o-down',
+  'fa fa-hand-o-left',
+  'fa fa-hand-o-right',
+  'fa fa-hand-o-up',
+  'fa fa-long-arrow-down',
+  'fa fa-long-arrow-left',
+  'fa fa-long-arrow-right',
+  'fa fa-long-arrow-up',
+  'fa fa-toggle-down',
+  'fa fa-toggle-left',
+  'fa fa-toggle-right',
+  'fa fa-toggle-up',
+  'fa fa-arrows-alt',
+  'fa fa-backward',
+  'fa fa-compress',
+  'fa fa-eject',
+  'fa fa-expand',
+  'fa fa-fast-backward',
+  'fa fa-fast-forward',
+  'fa fa-forward',
+  'fa fa-pause',
+  'fa fa-play',
+  'fa fa-play-circle',
+  'fa fa-play-circle-o',
+  'fa fa-step-backward',
+  'fa fa-step-forward',
+  'fa fa-stop',
+  'fa fa-youtube-play',
+  'fa fa-adn',
+  'fa fa-android',
+  'fa fa-apple',
+  'fa fa-behance',
+  'fa fa-behance-square',
+  'fa fa-bitbucket',
+  'fa fa-bitbucket-square',
+  'fa fa-bitcoin',
+  'fa fa-btc',
+  'fa fa-codepen',
+  'fa fa-css3',
+  'fa fa-delicious',
+  'fa fa-deviantart',
+  'fa fa-digg',
+  'fa fa-dribbble',
+  'fa fa-dropbox',
+  'fa fa-drupal',
+  'fa fa-empire',
+  'fa fa-facebook',
+  'fa fa-facebook-square',
+  'fa fa-flickr',
+  'fa fa-foursquare',
+  'fa fa-ge',
+  'fa fa-git',
+  'fa fa-git-square',
+  'fa fa-github',
+  'fa fa-github-alt',
+  'fa fa-github-square',
+  'fa fa-gittip',
+  'fa fa-google',
+  'fa fa-google-plus',
+  'fa fa-google-plus-square',
+  'fa fa-hacker-news',
+  'fa fa-html5',
+  'fa fa-instagram',
+  'fa fa-joomla',
+  'fa fa-jsfiddle',
+  'fa fa-linkedin',
+  'fa fa-linkedin-square',
+  'fa fa-linux',
+  'fa fa-maxcdn',
+  'fa fa-openid',
+  'fa fa-pagelines',
+  'fa fa-pied-piper',
+  'fa fa-pied-piper-alt',
+  'fa fa-pinterest',
+  'fa fa-pinterest-square',
+  'fa fa-qq',
+  'fa fa-ra',
+  'fa fa-rebel',
+  'fa fa-reddit',
+  'fa fa-reddit-square',
+  'fa fa-renren',
+  'fa fa-share-alt',
+  'fa fa-share-alt-square',
+  'fa fa-skype',
+  'fa fa-slack',
+  'fa fa-soundcloud',
+  'fa fa-spotify',
+  'fa fa-stack-exchange',
+  'fa fa-stack-overflow',
+  'fa fa-steam',
+  'fa fa-steam-square',
+  'fa fa-stumbleupon',
+  'fa fa-stumbleupon-circle',
+  'fa fa-tencent-weibo',
+  'fa fa-trello',
+  'fa fa-tumblr',
+  'fa fa-tumblr-square',
+  'fa fa-twitter',
+  'fa fa-twitter-square',
+  'fa fa-vimeo-square',
+  'fa fa-vine',
+  'fa fa-vk',
+  'fa fa-wechat',
+  'fa fa-weibo',
+  'fa fa-weixin',
+  'fa fa-windows',
+  'fa fa-wordpress',
+  'fa fa-xing',
+  'fa fa-xing-square',
+  'fa fa-yahoo',
+  'fa fa-youtube',
+  'fa fa-youtube-play',
+  'fa fa-youtube-square',
+  'fa fa-ambulance',
+  'fa fa-h-square',
+  'fa fa-hospital-o',
+  'fa fa-medkit',
+  'fa fa-plus-square',
+  'fa fa-stethoscope',
+  'fa fa-user-md',
+  'fa fa-wheelchair']
diff --git a/ruoyi-ui/src/views/system/menu/index.vue b/ruoyi-ui/src/views/system/menu/index.vue
index 5c1f85a6f..220b0b2ec 100644
--- a/ruoyi-ui/src/views/system/menu/index.vue
+++ b/ruoyi-ui/src/views/system/menu/index.vue
@@ -129,24 +129,16 @@
           </el-col>
           <el-col :span="24" v-if="form.menuType != 'F'">
             <el-form-item label="菜单图标" prop="icon">
-              <el-popover
-                placement="bottom-start"
-                width="460"
-                trigger="click"
-                @show="$refs['iconSelect'].reset()"
-              >
-                <IconSelect ref="iconSelect" @selected="selected" />
-                <el-input slot="reference" v-model="form.icon" placeholder="点击选择图标" readonly>
-                  <svg-icon
-                    v-if="form.icon"
-                    slot="prefix"
-                    :icon-class="form.icon"
-                    class="el-input__icon"
-                    style="height: 32px;width: 16px;"
-                  />
-                  <i v-else slot="prefix" class="el-icon-search el-input__icon" />
-                </el-input>
-              </el-popover>
+              <el-input v-model="form.icon" clearable @focus="selectIcon" placeholder="菜单图标名称">
+                <svg-icon
+                  v-if="form.icon"
+                  slot="prefix"
+                  :icon-class="form.icon"
+                  class="el-input__icon"
+                  style="height: 32px;width: 16px;"
+                />
+                <i v-else slot="prefix" class="el-icon-search el-input__icon" />
+              </el-input>
             </el-form-item>
           </el-col>
           <el-col :span="12">
@@ -272,19 +264,21 @@
         <el-button @click="cancel">取 消</el-button>
       </div>
     </el-dialog>
+
+    <IconDialogSelect ref="iconDialogSelect" :value="form.icon" @getValue="value => form.icon = value"></IconDialogSelect>
   </div>
 </template>
 
 <script>
+import IconDialogSelect from '@/components/IconDialogSelect'
 import { listMenu, getMenu, delMenu, addMenu, updateMenu } from "@/api/system/menu";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
-import IconSelect from "@/components/IconSelect";
 
 export default {
   name: "Menu",
   dicts: ['sys_show_hide', 'sys_normal_disable'],
-  components: { Treeselect, IconSelect },
+  components: { Treeselect, IconDialogSelect },
   data() {
     return {
       // 遮罩层
@@ -328,9 +322,9 @@ export default {
     this.getList();
   },
   methods: {
-    // 选择图标
-    selected(name) {
-      this.form.icon = name;
+    // 弹框选择图标
+    selectIcon () {
+      this.$refs.iconDialogSelect.visible = true
     },
     /** 查询菜单列表 */
     getList() {