diff --git a/src/components/scIconSelect/index.vue b/src/components/scIconSelect/index.vue
index d1988478..ab562222 100644
--- a/src/components/scIconSelect/index.vue
+++ b/src/components/scIconSelect/index.vue
@@ -1,35 +1,47 @@
 <!--
  * @Descripttion: 图标选择器组件
- * @version: 1.4
+ * @version: 2.0
  * @Author: sakuya
  * @Date: 2021年7月27日10:02:46
  * @LastEditors: sakuya
- * @LastEditTime: 2022年5月14日19:49:42
+ * @LastEditTime: 2022年6月6日13:48:49
 -->
 
 <template>
 	<div class="sc-icon-select">
-		<el-input v-model="defaultValue" :prefix-icon="defaultValue||'none'" :placeholder="placeholder" :clearable="clearable" :disabled="disabled">
-			<template #append><el-button icon="el-icon-more-filled" @click="open"></el-button></template>
-		</el-input>
-		<el-dialog title="图标选择器" v-model="dialogVisible" :width="780" destroy-on-close>
-			<el-tabs style="margin-top: -30px;">
-				<el-tab-pane  v-for="item in data" :key="item.name" lazy>
-					<template #label>
-						{{item.name}} <el-tag size="small" type="info">{{item.icons.length}}</el-tag>
-					</template>
-					<div class="sc-icon-select__list">
-						<el-scrollbar>
-							<ul @click="selectIcon">
-								<li v-for="icon in item.icons" :key="icon">
-									<span :data-icon="icon"></span>
-									<el-icon><component :is="icon" /></el-icon>
-								</li>
-							</ul>
-						</el-scrollbar>
-					</div>
-				</el-tab-pane>
-			</el-tabs>
+		<div class="sc-icon-select__wrapper" :class="{'hasValue':value}" @click="open">
+			<el-input :prefix-icon="value||'el-icon-plus'" v-model="value" :disabled="disabled" readonly></el-input>
+		</div>
+		<el-dialog title="图标选择器" v-model="dialogVisible" :width="760" destroy-on-close append-to-body>
+			<div class="sc-icon-select__dialog" style="margin: -20px 0 -10px 0;">
+				<el-form :rules="{}">
+					<el-form-item prop="searchText">
+						<el-input class="sc-icon-select__search-input" prefix-icon="el-icon-search" v-model="searchText" placeholder="搜索" size="large" clearable/>
+					</el-form-item>
+				</el-form>
+				<el-tabs>
+					<el-tab-pane  v-for="item in data" :key="item.name" lazy>
+						<template #label>
+							{{item.name}} <el-tag size="small" type="info">{{item.icons.length}}</el-tag>
+						</template>
+						<div class="sc-icon-select__list">
+							<el-scrollbar>
+								<ul @click="selectIcon">
+									<el-empty v-if="item.icons.length==0" :image-size="100" description="未查询到相关图标" />
+									<li v-for="icon in item.icons" :key="icon">
+										<span :data-icon="icon"></span>
+										<el-icon><component :is="icon" /></el-icon>
+									</li>
+								</ul>
+							</el-scrollbar>
+						</div>
+					</el-tab-pane>
+				</el-tabs>
+			</div>
+			<template #footer>
+				<el-button @click="clear" text>清除</el-button>
+				<el-button @click="dialogVisible=false">取消</el-button>
+			</template>
 		</el-dialog>
 	</div>
 </template>
@@ -40,27 +52,28 @@
 	export default {
 		props: {
 			modelValue: { type: String, default: "" },
-			placeholder: { type: String, default: "请输入或者选择图标" },
-			clearable: { type: Boolean, default: false },
 			disabled: { type: Boolean, default: false },
 		},
 		data() {
 			return {
-				defaultValue: '',
+				value: "",
 				dialogVisible: false,
-				data: []
+				data: [],
+				searchText: ""
 			}
 		},
 		watch:{
 			modelValue(val){
-				this.defaultValue = val
+				this.value = val
 			},
-			defaultValue(val){
+			value(val){
 				this.$emit('update:modelValue', val)
+			},
+			searchText(val){
+				this.search(val)
 			}
 		},
 		mounted() {
-			this.defaultValue = this.modelValue
 			this.data.push(...config.icons)
 		},
 		methods: {
@@ -74,25 +87,41 @@
 				if(e.target.tagName != 'SPAN'){
 					return false
 				}
-				this.defaultValue = e.target.dataset.icon
+				this.value = e.target.dataset.icon
 				this.dialogVisible = false
-				this.$emit('update:modelValue', this.defaultValue);
+			},
+			clear(){
+				this.value = ""
+				this.dialogVisible = false
+			},
+			search(text){
+				if(text){
+					const filterData = JSON.parse(JSON.stringify(config.icons))
+					filterData.forEach(t => {
+						t.icons = t.icons.filter(n => n.includes(text))
+					})
+					this.data = filterData
+				}else{
+					this.data = JSON.parse(JSON.stringify(config.icons))
+				}
 			}
 		}
 	}
 </script>
 
 <style scoped>
-	.sc-icon-select {display: inline-block;}
-	.sc-icon-select__list {height:360px;overflow: auto;}
-	.sc-icon-select__list ul {}
-	.sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;box-shadow: 0 0 0 1px #eee;transition: all 0.1s;border-radius: 4px;position: relative;}
-	.sc-icon-select__list li span {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;cursor: pointer;}
-	.sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;background: #fff;display: flex;justify-content: center;align-items: center;border-radius: 4px;}
-	.sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
-	.sc-icon-select__list li:hover i {color: #409EFF;}
+	.sc-icon-select {display: inline-flex;}
+	.sc-icon-select__wrapper {cursor: pointer;display: inline-flex;}
+	.sc-icon-select__wrapper:deep(.el-input__wrapper).is-focus {box-shadow: 0 0 0 1px var(--el-input-hover-border-color) inset;}
+	.sc-icon-select__wrapper:deep(.el-input__inner) {flex-grow:0;width: 0;}
+	.sc-icon-select__wrapper:deep(.el-input__icon) {margin: 0;font-size: 16px;}
+	.sc-icon-select__wrapper.hasValue:deep(.el-input__icon) {color: var(--el-text-color-regular);}
 
-	.dark .sc-icon-select__list li {box-shadow: 0 0 0 1px #333;;}
-	.dark .sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px rgba(64,158,255,1);}
-	.dark .sc-icon-select__list li i {background: var(--el-bg-color);}
+	.sc-icon-select__list {height:270px;overflow: auto;}
+	.sc-icon-select__list ul {}
+	.sc-icon-select__list li {display: inline-block;width:80px;height:80px;margin:5px;vertical-align: top;transition: all 0.1s;border-radius: 4px;position: relative;}
+	.sc-icon-select__list li span {position: absolute;top:0;left:0;right:0;bottom:0;z-index: 1;cursor: pointer;}
+	.sc-icon-select__list li i {display: inline-block;width: 100%;height:100%;font-size: 26px;color: #6d7882;display: flex;justify-content: center;align-items: center;border-radius: 4px;}
+	.sc-icon-select__list li:hover {box-shadow: 0 0 1px 4px var(--el-color-primary);background: var(--el-color-primary-light-9);}
+	.sc-icon-select__list li:hover i {color: var(--el-color-primary);}
 </style>
diff --git a/src/views/vab/iconselect.vue b/src/views/vab/iconselect.vue
index 6931639f..0774d5d9 100644
--- a/src/views/vab/iconselect.vue
+++ b/src/views/vab/iconselect.vue
@@ -13,7 +13,7 @@
 		<el-card shadow="never">
 			<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
 				<el-form-item label="图标" prop="icon">
-					<sc-icon-select v-model="form.icon" clearable :disabled="disabled"></sc-icon-select>
+					<sc-icon-select v-model="form.icon" :disabled="disabled"></sc-icon-select>
 				</el-form-item>
 				<el-form-item>
 					<el-button type="primary" @click="submitForm">保存</el-button>