diff --git a/core/core-frontend/src/components/visualization/LinkJumpSet.vue b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
index f86bc2af67..a5c4b33117 100644
--- a/core/core-frontend/src/components/visualization/LinkJumpSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkJumpSet.vue
@@ -67,9 +67,11 @@
                     <span class="tree-select-field">
                       <el-icon style="margin-right: 4px">
                         <Icon
-                          :name="`field_${fieldType[data.sourceDeType]}`"
-                          :className="`field-icon-${fieldType[data.sourceDeType]}`"
-                          ><component :is="iconFieldMap[fieldType[data.sourceDeType]]"></component
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[data.sourceDeType]}`"
+                            :is="iconFieldMap[fieldType[data.sourceDeType]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                       {{ data.sourceFieldName }}
@@ -245,9 +247,11 @@
                                 >
                                   <span class="custom-option">
                                     <Icon
-                                      class-name="view-type-icon"
-                                      style="width: 14px; height: 14px"
-                                      ><component :is="iconChartMap[item.type]"></component
+                                      ><component
+                                        class="svg-icon view-type-icon"
+                                        style="width: 14px; height: 14px"
+                                        :is="iconChartMap[item.type]"
+                                      ></component
                                     ></Icon>
                                     <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                       item.title
diff --git a/core/core-frontend/src/components/visualization/LinkageSet.vue b/core/core-frontend/src/components/visualization/LinkageSet.vue
index 77d98a1f09..88ba0f0c59 100644
--- a/core/core-frontend/src/components/visualization/LinkageSet.vue
+++ b/core/core-frontend/src/components/visualization/LinkageSet.vue
@@ -134,11 +134,12 @@
                   </span>
                   <span>
                     <span class="tree-select-field">
-                      <Icon
-                        class-name="view-type-icon"
-                        style="margin-right: 4px"
-                        :name="data.targetViewType"
-                        ><component :is="iconChartMap[data.targetViewType]"></component
+                      <Icon :name="data.targetViewType"
+                        ><component
+                          class="svg-icon view-type-icon"
+                          style="margin-right: 4px"
+                          :is="iconChartMap[data.targetViewType]"
+                        ></component
                       ></Icon>
                       {{ data.targetViewName }}
                     </span>
@@ -180,9 +181,12 @@
                           >
                             <span class="custom-option">
                               <Icon
-                                style="width: 14px; height: 14px"
-                                :className="`field-icon-${fieldType[item.deType]}`"
-                                ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                                ><component
+                                  style="width: 14px; height: 14px"
+                                  :class="`field-icon-${fieldType[item.deType]}`"
+                                  class="svg-icon"
+                                  :is="iconFieldMap[fieldType[item.deType]]"
+                                ></component
                               ></Icon>
                               <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                 item.name
@@ -212,10 +216,12 @@
                           >
                             <span class="custom-option">
                               <Icon
-                                style="width: 14px; height: 14px"
-                                :name="`field_${fieldType[item.deType]}`"
-                                :className="`field-icon-${fieldType[item.deType]}`"
-                                ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                                ><component
+                                  style="width: 14px; height: 14px"
+                                  class="svg-icon"
+                                  :class="`field-icon-${fieldType[item.deType]}`"
+                                  :is="iconFieldMap[fieldType[item.deType]]"
+                                ></component
                               ></Icon>
                               <span style="float: left; margin-left: 4px; font-size: 14px">{{
                                 item.name
diff --git a/core/core-frontend/src/components/visualization/OuterParamsSet.vue b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
index 99896c322f..5a76a3a111 100644
--- a/core/core-frontend/src/components/visualization/OuterParamsSet.vue
+++ b/core/core-frontend/src/components/visualization/OuterParamsSet.vue
@@ -187,9 +187,12 @@
                             :value="item.attachId"
                           >
                             <Icon
-                              style="width: 14px; height: 14px"
-                              :className="`field-icon-${fieldType[item.deType]}`"
-                              ><component :is="iconFieldMap[fieldType[item.deType]]"></component
+                              ><component
+                                class="svg-icon"
+                                style="width: 14px; height: 14px"
+                                :class="`field-icon-${fieldType[item.deType]}`"
+                                :is="iconFieldMap[fieldType[item.deType]]"
+                              ></component
                             ></Icon>
                             <span style="font-size: 12px">{{ item.name }}</span>
                           </el-option>
@@ -227,10 +230,11 @@
                           </div>
                           <div>
                             <Icon
-                              class-name="view-type-icon"
-                              style="margin: 0 4px"
-                              :name="viewInfo.chartType"
-                              ><component :is="iconChartMap[viewInfo.chartType]"></component
+                              ><component
+                                class="svg-icon view-type-icon"
+                                style="margin: 0 4px"
+                                :is="iconChartMap[viewInfo.chartType]"
+                              ></component
                             ></Icon>
                           </div>
                           <span style="font-size: 12px"> {{ viewInfo.chartName }}</span>
diff --git a/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue b/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue
index 037149c4c8..e07b0b1b28 100644
--- a/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue
+++ b/core/core-frontend/src/components/visualization/component-background/BackgroundItem.vue
@@ -11,9 +11,11 @@
       @click.stop="setBoard"
     >
       <Icon
-        :style="{ color: curComponent.commonBackground.innerImageColor }"
-        class-name="svg-background"
-        ><component :is="iconBoardMap[mainIconClass]"></component
+        ><component
+          class="svg-icon svg-background"
+          :style="{ color: curComponent.commonBackground.innerImageColor }"
+          :is="iconBoardMap[mainIconClass]"
+        ></component
       ></Icon>
     </div>
     <span class="demonstration">{{ template.name }}</span>
diff --git a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
index d23aad8ae3..f5b15076df 100644
--- a/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
+++ b/core/core-frontend/src/custom-component/component-group/CommonGroup.vue
@@ -88,7 +88,7 @@ const groupActiveChange = category => {
             <Icon
               v-if="['outer_svg', 'graphical'].includes(chartInfo.type)"
               class-name="item-top-icon"
-              ><component :is="chartInfo.icon"></component
+              ><component class="svg-icon item-top-icon" :is="chartInfo.icon"></component
             ></Icon>
             <component v-else style="color: #a6a6a6" :is="chartInfo.icon"></component>
           </div>
diff --git a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
index 964a4497e6..10f51b6c8b 100644
--- a/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
+++ b/core/core-frontend/src/views/chart/components/editor/editor-senior/components/dialog/TableThresholdEdit.vue
@@ -277,10 +277,13 @@ init()
               >
                 <el-icon style="margin-right: 8px">
                   <Icon
-                    :className="`field-icon-${
-                      fieldType[[2, 3].includes(fieldOption.deType) ? 2 : 0]
-                    }`"
-                    ><component :is="iconFieldMap[fieldType[fieldOption.deType]]"></component
+                    ><component
+                      :class="`field-icon-${
+                        fieldType[[2, 3].includes(fieldOption.deType) ? 2 : 0]
+                      }`"
+                      class="svg-icon"
+                      :is="iconFieldMap[fieldType[fieldOption.deType]]"
+                    ></component
                   ></Icon>
                 </el-icon>
                 {{ fieldOption.name }}
diff --git a/core/core-frontend/src/views/chart/components/editor/index.vue b/core/core-frontend/src/views/chart/components/editor/index.vue
index 3d6ac7061d..4b8ef78537 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -3216,10 +3216,13 @@ const deleteChartFieldItem = id => {
                         >
                           <el-icon>
                             <Icon
-                              :class-name="`field-icon-${
-                                fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
-                              }`"
-                              ><component :is="iconFieldMap[fieldType[ele.deType]]"></component
+                              ><component
+                                class="svg-icon"
+                                :class="`field-icon-${
+                                  fieldType[[2, 3].includes(ele.deType) ? 2 : 0]
+                                }`"
+                                :is="iconFieldMap[fieldType[ele.deType]]"
+                              ></component
                             ></Icon>
                           </el-icon>
                           <span class="field-name ellipsis" :class="{ dark: themes === 'dark' }">{{
diff --git a/core/core-frontend/src/views/common/DeResourceTree.vue b/core/core-frontend/src/views/common/DeResourceTree.vue
index 484042e9a8..82c77826cd 100644
--- a/core/core-frontend/src/views/common/DeResourceTree.vue
+++ b/core/core-frontend/src/views/common/DeResourceTree.vue
@@ -534,7 +534,7 @@ defineExpose({
                 <el-dropdown-menu>
                   <el-dropdown-item @click="addOperation('newLeaf', null, 'leaf', true)">
                     <el-icon :class="`handle-icon color-${curCanvasType}`">
-                      <Icon><component :is="dvSvgType"></component></Icon>
+                      <Icon><component class="svg-icon" :is="dvSvgType"></component></Icon>
                     </el-icon>
                     空白新建
                   </el-dropdown-item>
diff --git a/core/core-frontend/src/views/copilot/DialogueChart.vue b/core/core-frontend/src/views/copilot/DialogueChart.vue
index 3a6979a2f7..e4c23bac8f 100644
--- a/core/core-frontend/src/views/copilot/DialogueChart.vue
+++ b/core/core-frontend/src/views/copilot/DialogueChart.vue
@@ -266,7 +266,10 @@ const tips = computed(() => {
   >
     <el-icon style="font-size: 32px" class="dialogue-chart_icon">
       <Icon
-        ><component :is="copilotInfo.msgType === 'api' ? copilot : default_avatar"></component
+        ><component
+          class="svg-icon"
+          :is="copilotInfo.msgType === 'api' ? copilot : default_avatar"
+        ></component
       ></Icon>
     </el-icon>
     <div ref="content" class="content">
@@ -315,7 +318,10 @@ const tips = computed(() => {
           class="select-prefix"
         >
           <Icon
-            ><component :is="curTypeList.find(ele => ele.value === activeCommand).icon"></component
+            ><component
+              class="svg-icon"
+              :is="curTypeList.find(ele => ele.value === activeCommand).icon"
+            ></component
           ></Icon>
         </el-icon>
         <el-tooltip effect="dark" content="切换图表类型" placement="top">
diff --git a/core/core-frontend/src/views/copilot/index.vue b/core/core-frontend/src/views/copilot/index.vue
index 707a3fa691..ea3742a3b7 100644
--- a/core/core-frontend/src/views/copilot/index.vue
+++ b/core/core-frontend/src/views/copilot/index.vue
@@ -233,7 +233,12 @@ const queryAnswer = (event?: KeyboardEvent) => {
             <Icon name="icon_loading_outlined"><icon_loading_outlined class="svg-icon" /></Icon>
           </el-icon>
           <el-icon v-else class="copilot-icon" @click="queryAnswer" :class="isActive && 'active'">
-            <Icon><component :is="isActive ? activeBtn_copilot : btn_copilot"></component></Icon>
+            <Icon
+              ><component
+                class="svg-icon"
+                :is="isActive ? activeBtn_copilot : btn_copilot"
+              ></component
+            ></Icon>
           </el-icon>
         </div>
       </div>
@@ -298,10 +303,13 @@ const queryAnswer = (event?: KeyboardEvent) => {
                 <span class="custom-tree-node father">
                   <el-icon>
                     <Icon
-                      :className="`field-icon-${
-                        fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
-                      }`"
-                      ><component :is="iconFieldMap[fieldType[data.deExtractType]]"></component
+                      ><component
+                        class="svg-icon"
+                        :class="`field-icon-${
+                          fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
+                        }`"
+                        :is="iconFieldMap[fieldType[data.deExtractType]]"
+                      ></component
                     ></Icon>
                   </el-icon>
                   <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
@@ -323,10 +331,13 @@ const queryAnswer = (event?: KeyboardEvent) => {
                 <span class="custom-tree-node father">
                   <el-icon>
                     <Icon
-                      :className="`field-icon-${
-                        fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
-                      }`"
-                      ><component :is="iconFieldMap[fieldType[data.deExtractType]]"></component
+                      ><component
+                        class="svg-icon"
+                        :class="`field-icon-${
+                          fieldType[[2, 3].includes(data.deExtractType) ? 2 : 0]
+                        }`"
+                        :is="iconFieldMap[fieldType[data.deExtractType]]"
+                      ></component
                     ></Icon>
                   </el-icon>
                   <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
diff --git a/core/core-frontend/src/views/data-visualization/PreviewHead.vue b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
index fa04f513f8..bd650d5748 100644
--- a/core/core-frontend/src/views/data-visualization/PreviewHead.vue
+++ b/core/core-frontend/src/views/data-visualization/PreviewHead.vue
@@ -113,7 +113,12 @@ const initOpenHandler = newWindow => {
         @click="executeStore"
         :style="{ color: favorited ? '#FFC60A' : '#646A73' }"
       >
-        <icon><component :is="favorited ? visualStar : icon_collection_outlined"></component></icon>
+        <icon
+          ><component
+            class="svg-icon"
+            :is="favorited ? visualStar : icon_collection_outlined"
+          ></component
+        ></icon>
       </el-icon>
     </el-tooltip>
     <el-divider style="margin: 0 16px 0 7px" direction="vertical" />
diff --git a/core/core-frontend/src/views/mobile/components/DashboardCell.vue b/core/core-frontend/src/views/mobile/components/DashboardCell.vue
index df0b9b9ec2..357abb0c75 100644
--- a/core/core-frontend/src/views/mobile/components/DashboardCell.vue
+++ b/core/core-frontend/src/views/mobile/components/DashboardCell.vue
@@ -25,7 +25,7 @@ const handleClick = () => {
   <div class="dashboard-cell" @click="handleClick">
     <div class="label">
       <el-icon>
-        <Icon><component :is="prefixIcon"></component></Icon>
+        <Icon><component class="svg-icon" :is="prefixIcon"></component></Icon>
       </el-icon>
       <span class="text ellipsis">
         {{ label }}
diff --git a/core/core-frontend/src/views/mobile/components/OrgCell.vue b/core/core-frontend/src/views/mobile/components/OrgCell.vue
index 303a35ffe2..af11f09cf1 100644
--- a/core/core-frontend/src/views/mobile/components/OrgCell.vue
+++ b/core/core-frontend/src/views/mobile/components/OrgCell.vue
@@ -37,7 +37,7 @@ const handleRightClick = () => {
   <div class="org-cell">
     <div class="label" :class="active && 'active'">
       <el-icon v-if="!!prefixIcon">
-        <Icon><component :is="prefixIcon"></component></Icon>
+        <Icon><component class="svg-icon" :is="prefixIcon"></component></Icon>
       </el-icon>
       <span class="text ellipsis">
         {{ label }}
diff --git a/core/core-frontend/src/views/share/share/ShareGrid.vue b/core/core-frontend/src/views/share/share/ShareGrid.vue
index 985fb34e23..a4b4479a89 100644
--- a/core/core-frontend/src/views/share/share/ShareGrid.vue
+++ b/core/core-frontend/src/views/share/share/ShareGrid.vue
@@ -203,7 +203,7 @@ watch(
               /></Icon>
             </el-icon>
             <el-icon v-else :class="`main-color color-${scope.row.type}`">
-              <Icon><component :is="iconMap[scope.row.type]"></component></Icon>
+              <Icon><component class="svg-icon" :is="iconMap[scope.row.type]"></component></Icon>
             </el-icon>
             <el-tooltip placement="top">
               <template #content>{{ scope.row.name }}</template>
diff --git a/core/core-frontend/src/views/system/common/InfoTemplate.vue b/core/core-frontend/src/views/system/common/InfoTemplate.vue
index 9ec94e7df1..6ce9d2fdb8 100644
--- a/core/core-frontend/src/views/system/common/InfoTemplate.vue
+++ b/core/core-frontend/src/views/system/common/InfoTemplate.vue
@@ -54,7 +54,10 @@
               <el-button text @click="switchPwd(item.pkey)" class="setting-tip-btn">
                 <template #icon>
                   <Icon
-                    ><component :is="pwdItem[item.pkey]['hidden'] ? eye : eyeOpen"></component
+                    ><component
+                      class="svg-icon"
+                      :is="pwdItem[item.pkey]['hidden'] ? eye : eyeOpen"
+                    ></component
                   ></Icon>
                 </template>
               </el-button>
diff --git a/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue b/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue
index ccbc4d0391..c2d8b1d755 100644
--- a/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue
+++ b/core/core-frontend/src/views/system/parameter/engine/EngineEdit.vue
@@ -331,7 +331,10 @@ defineExpose({
         >{{ t('datasource.priority') }}
         <el-icon>
           <Icon
-            ><component :is="showPriority ? icon_down_outlined : icon_down_outlined1"></component
+            ><component
+              class="svg-icon"
+              :is="showPriority ? icon_down_outlined : icon_down_outlined1"
+            ></component
           ></Icon>
         </el-icon>
       </span>
diff --git a/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue b/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
index d9a28f6e01..51e2d9897f 100644
--- a/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
+++ b/core/core-frontend/src/views/system/parameter/engine/EngineInfoTemplate.vue
@@ -14,7 +14,10 @@
       {{ t('datasource.priority') }}
       <el-icon>
         <Icon
-          ><component :is="showPriority ? icon_down_outlined : icon_down_outlined1"></component
+          ><component
+            class="svg-icon"
+            :is="showPriority ? icon_down_outlined : icon_down_outlined1"
+          ></component
         ></Icon>
       </el-icon>
     </span>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
index 96518a6a8e..3378ac7770 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/DatasetUnion.vue
@@ -1090,7 +1090,10 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
         >
           <el-icon>
             <Icon
-              ><component :is="ele.type !== 'sql' ? referenceTable : icon_sql_outlined"></component
+              ><component
+                class="svg-icon"
+                :is="ele.type !== 'sql' ? referenceTable : icon_sql_outlined"
+              ></component
             ></Icon>
           </el-icon>
           <span class="tableName">{{ ele.tableName }}</span>
@@ -1119,7 +1122,7 @@ const emits = defineEmits(['addComplete', 'joinEditor', 'updateAllfields', 'chan
           :style="{ borderColor: ele.sqlChangeFlag ? '#F54A45' : '' }"
         >
           <el-icon>
-            <Icon><component :is="iconName[ele.to.unionType]"></component></Icon>
+            <Icon><component class="svg-icon" :is="iconName[ele.to.unionType]"></component></Icon>
           </el-icon>
         </div>
       </foreignObject>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue b/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue
index 48ce4bc071..164986bd30 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/FieldMore.vue
@@ -166,11 +166,14 @@ const handleChange = () => {
         <div class="flex-align-center icon">
           <el-icon v-if="data.icon">
             <Icon
-              :className="
-                ['text', 'location', 'value', 'float', 'time', 'url'].includes(data.value) &&
-                `field-icon-${fieldType[['float', 'value'].includes(data.value) ? 2 : 0]}`
-              "
-              ><component :is="data.icon"></component
+              ><component
+                class="svg-icon"
+                :class="
+                  ['text', 'location', 'value', 'float', 'time', 'url'].includes(data.value) &&
+                  `field-icon-${fieldType[['float', 'value'].includes(data.value) ? 2 : 0]}`
+                "
+                :is="data.icon"
+              ></component
             ></Icon>
           </el-icon>
           <span>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue b/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
index 091d6967bf..a758556c74 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/UnionItemEdit.vue
@@ -75,7 +75,12 @@ init()
         >
           <template #prefix>
             <el-icon>
-              <Icon><component :is="iconName[unionTypeFromParent] || noJoin"></component></Icon>
+              <Icon
+                ><component
+                  class="svg-icon"
+                  :is="iconName[unionTypeFromParent] || noJoin"
+                ></component
+              ></Icon>
             </el-icon>
           </template>
           <el-option
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
index b28b5bdf0a..c59eb2d7e5 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/index.vue
@@ -1598,10 +1598,11 @@ const getDsIconName = data => {
                     <span class="custom-tree-node father">
                       <el-icon>
                         <Icon
-                          :className="`field-icon-${
-                            fieldType[[2, 3].includes(data.deType) ? 2 : 0]
-                          }`"
-                          ><component :is="iconFieldMap[fieldType[data.deType]]"></component
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[[2, 3].includes(data.deType) ? 2 : 0]}`"
+                            :is="iconFieldMap[fieldType[data.deType]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                       <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
@@ -1631,10 +1632,11 @@ const getDsIconName = data => {
                     <span class="custom-tree-node father">
                       <el-icon>
                         <Icon
-                          :className="`field-icon-${
-                            fieldType[[2, 3].includes(data.deType) ? 2 : 0]
-                          }`"
-                          ><component :is="iconFieldMap[fieldType[data.deType]]"></component
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${fieldType[[2, 3].includes(data.deType) ? 2 : 0]}`"
+                            :is="iconFieldMap[fieldType[data.deType]]"
+                          ></component
                         ></Icon>
                       </el-icon>
                       <span :title="data.name" class="label-tooltip">{{ data.name }}</span>
@@ -1672,10 +1674,13 @@ const getDsIconName = data => {
                     <div class="flex-align-center">
                       <ElIcon style="margin-right: 6px">
                         <Icon
-                          :className="`field-icon-${
-                            fieldType[[2, 3].includes(column.deType) ? 2 : 0]
-                          }`"
-                          ><component :is="iconFieldMap[fieldType[column.deType]]"></component
+                          ><component
+                            class="svg-icon"
+                            :class="`field-icon-${
+                              fieldType[[2, 3].includes(column.deType) ? 2 : 0]
+                            }`"
+                            :is="iconFieldMap[fieldType[column.deType]]"
+                          ></component
                         ></Icon>
                       </ElIcon>
                       <span class="ellipsis" :title="column.title" style="width: 120px">
@@ -1757,10 +1762,13 @@ const getDsIconName = data => {
                           <template v-slot="{ data }">
                             <el-icon>
                               <Icon
-                                :className="`field-icon-${
-                                  fieldType[[2, 3].includes(data.value) ? 2 : 0]
-                                }`"
-                                ><component :is="iconFieldMap[getIconName(data.value)]"></component
+                                ><component
+                                  class="svg-icon"
+                                  :class="`field-icon-${
+                                    fieldType[[2, 3].includes(data.value) ? 2 : 0]
+                                  }`"
+                                  :is="iconFieldMap[getIconName(data.value)]"
+                                ></component
                               ></Icon>
                             </el-icon>
                             <span>{{ data.label }}</span>
@@ -1933,10 +1941,13 @@ const getDsIconName = data => {
                           <template v-slot="{ data }">
                             <el-icon>
                               <Icon
-                                :className="`field-icon-${
-                                  fieldType[[2, 3].includes(data.value) ? 2 : 0]
-                                }`"
-                                ><component :is="iconFieldMap[getIconName(data.value)]"></component
+                                ><component
+                                  class="svg-icon"
+                                  :class="`field-icon-${
+                                    fieldType[[2, 3].includes(data.value) ? 2 : 0]
+                                  }`"
+                                  :is="iconFieldMap[getIconName(data.value)]"
+                                ></component
                               ></Icon>
                             </el-icon>
                             <span>{{ data.label }}</span>
@@ -2069,8 +2080,11 @@ const getDsIconName = data => {
                   <template v-slot="{ data }">
                     <el-icon>
                       <Icon
-                        :className="`field-icon-${fieldType[[2, 3].includes(data.value) ? 2 : 0]}`"
-                        ><component :is="iconFieldMap[getIconName(data.value)]"></component
+                        ><component
+                          class="svg-icon"
+                          :class="`field-icon-${fieldType[[2, 3].includes(data.value) ? 2 : 0]}`"
+                          :is="iconFieldMap[getIconName(data.value)]"
+                        ></component
                       ></Icon>
                     </el-icon>
                     <span>{{ data.label }}</span>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
index 99c0470e52..0f66a653f9 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/EditorDetail.vue
@@ -1099,7 +1099,10 @@ defineExpose({
               >SSH 设置
               <el-icon>
                 <Icon
-                  ><component :is="showSSH ? icon_down_outlined : icon_down_outlined1"></component
+                  ><component
+                    class="svg-icon"
+                    :is="showSSH ? icon_down_outlined : icon_down_outlined1"
+                  ></component
                 ></Icon>
               </el-icon>
             </span>
diff --git a/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue b/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue
index 79d39724a2..f634cd35a9 100644
--- a/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue
+++ b/core/core-frontend/src/views/visualized/view/panel/filter-config/index.vue
@@ -182,9 +182,11 @@ const handleTabClick = () => {
             <div class="filter-db-row">
               <el-icon>
                 <Icon
-                  :name="`field_${fieldType[element.deType]}`"
-                  :className="`field-icon-${fieldType[element.deType]}`"
-                  ><component :is="iconFieldMap[fieldType[element.deType]]"></component
+                  ><component
+                    class="svg-icon"
+                    :class="`field-icon-${fieldType[element.deType]}`"
+                    :is="iconFieldMap[fieldType[element.deType]]"
+                  ></component
                 ></Icon>
               </el-icon>
               <span :title="element.name">{{ element.name }}</span>
diff --git a/core/core-frontend/src/views/workbranch/ShortcutTable.vue b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
index 528307006e..8e47e04bf4 100644
--- a/core/core-frontend/src/views/workbranch/ShortcutTable.vue
+++ b/core/core-frontend/src/views/workbranch/ShortcutTable.vue
@@ -328,10 +328,12 @@ const getEmptyDesc = (): string => {
           <template v-slot:default="scope">
             <div class="name-content" :class="{ 'jump-active': jumpActiveCheck(scope.row) }">
               <el-icon v-if="scope.row.extFlag" style="margin-right: 12px; font-size: 18px">
-                <Icon><component :is="iconMap[scope.row.type + 'Mobile']"></component></Icon>
+                <Icon
+                  ><component class="svg-icon" :is="iconMap[scope.row.type + 'Mobile']"></component
+                ></Icon>
               </el-icon>
               <el-icon v-else :class="`main-color color-${scope.row.type}`">
-                <Icon><component :is="iconMap[scope.row.type]"></component></Icon>
+                <Icon><component class="svg-icon" :is="iconMap[scope.row.type]"></component></Icon>
               </el-icon>
               <el-tooltip placement="top">
                 <template #content>{{ scope.row.name }}</template>
diff --git a/core/core-frontend/src/views/workbranch/index.vue b/core/core-frontend/src/views/workbranch/index.vue
index c13cb1fed3..7a8d6b8780 100644
--- a/core/core-frontend/src/views/workbranch/index.vue
+++ b/core/core-frontend/src/views/workbranch/index.vue
@@ -334,7 +334,7 @@ initMarketTemplate()
               <div class="empty-tooltip-container" />
             </el-tooltip>
             <el-icon class="main-color" :style="{ backgroundColor: ele.color }">
-              <Icon><component :is="ele.icon"></component></Icon>
+              <Icon><component class="svg-icon" :is="ele.icon"></component></Icon>
             </el-icon>
             <span class="name">
               {{ t(`auth.${ele.name}`) }}