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 295cc04abd..3d6ac7061d 100644
--- a/core/core-frontend/src/views/chart/components/editor/index.vue
+++ b/core/core-frontend/src/views/chart/components/editor/index.vue
@@ -3134,10 +3134,11 @@ const deleteChartFieldItem = id => {
                     >
                       <el-icon>
                         <Icon
-                          :class-name="`field-icon-${
-                            fieldType[[2, 3].includes(element.deType) ? 2 : 0]
-                          }`"
                           ><component
+                            class="svg-icon"
+                            :class="`field-icon-${
+                              fieldType[[2, 3].includes(element.deType) ? 2 : 0]
+                            }`"
                             :is="getIconName(element.deType, element.extField)"
                           ></component
                         ></Icon>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
index 98810cfa09..9cbc038784 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/form/AddSql.vue
@@ -12,7 +12,17 @@ import icon_info_outlined from '@/assets/svg/icon_info_outlined.svg'
 import icon_textBox_outlined from '@/assets/svg/icon_text-box_outlined.svg'
 import icon_info_colorful from '@/assets/svg/icon_info_colorful.svg'
 import icon_playRound_outlined from '@/assets/svg/icon_play-round_outlined.svg'
-import { ref, reactive, onMounted, PropType, toRefs, watch, onBeforeUnmount, shallowRef } from 'vue'
+import {
+  ref,
+  reactive,
+  onMounted,
+  PropType,
+  toRefs,
+  watch,
+  onBeforeUnmount,
+  shallowRef,
+  h
+} from 'vue'
 import { useI18n } from '@/hooks/web/useI18n'
 import { Base64 } from 'js-base64'
 import FixedSizeList from 'element-plus-secondary/es/components/virtual-list/src/components/fixed-size-list.mjs'
@@ -105,11 +115,10 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
-          <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {{
-              ...iconFieldMap[fieldType[column.deType]],
-              className: `svg-icon field-icon-${fieldType[column.deType]}`
-            }}
+          <Icon>
+            {h(iconFieldMap[fieldType[column.deType]], {
+              class: `svg-icon field-icon-${fieldType[column.deType]}`
+            })}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
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 34e8375c70..b28b5bdf0a 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
@@ -23,6 +23,7 @@ import {
   computed,
   watch,
   provide,
+  h,
   onMounted,
   onBeforeUnmount
 } from 'vue'
@@ -621,11 +622,10 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center">
         <ElIcon>
-          <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {{
-              ...iconFieldMap[fieldType[column.deType]],
-              className: `svg-icon field-icon-${fieldType[column.deType]}`
-            }}
+          <Icon>
+            {h(iconFieldMap[fieldType[column.deType]], {
+              class: `svg-icon field-icon-${fieldType[column.deType]}`
+            })}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px', marginLeft: '4px' }}>
diff --git a/core/core-frontend/src/views/visualized/data/dataset/index.vue b/core/core-frontend/src/views/visualized/data/dataset/index.vue
index ba59f57757..697c42e002 100644
--- a/core/core-frontend/src/views/visualized/data/dataset/index.vue
+++ b/core/core-frontend/src/views/visualized/data/dataset/index.vue
@@ -218,11 +218,10 @@ const allFieldsColumns = [
     cellRenderer: ({ cellData: deType }) => (
       <div style={{ width: '100%', display: 'flex', alignItems: 'center' }}>
         <ElIcon style={{ marginRight: '6px' }}>
-          <Icon className={`field-icon-${fieldType[deType]}`}>
-            {{
-              ...iconFieldMap[fieldType[deType]],
-              className: `svg-icon field-icon-${fieldType[deType]}`
-            }}
+          <Icon>
+            {h(iconFieldMap[fieldType[deType]], {
+              class: `svg-icon field-icon-${fieldType[deType]}`
+            })}
           </Icon>
         </ElIcon>
         {t(`dataset.${fieldType[deType]}`) +
@@ -258,11 +257,10 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
-          <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {{
-              ...iconFieldMap[fieldType[column.deType]],
-              className: `svg-icon field-icon-${fieldType[column.deType]}`
-            }}
+          <Icon>
+            {h(iconFieldMap[fieldType[column.deType]], {
+              class: `svg-icon field-icon-${fieldType[column.deType]}`
+            })}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
index 5d92240f1e..ed58e1d94f 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/form/ExcelDetail.vue
@@ -7,6 +7,7 @@ import {
   ref,
   shallowRef,
   reactive,
+  h,
   computed,
   toRefs,
   onMounted,
@@ -117,11 +118,10 @@ const generateColumns = (arr: Field[]) =>
     headerCellRenderer: ({ column }) => (
       <div class="flex-align-center icon">
         <ElIcon>
-          <Icon className={`field-icon-${fieldType[column.fieldType]}`}>
-            {{
-              ...iconFieldMap[fieldType[column.fieldType]],
-              className: `svg-icon field-icon-${fieldType[column.fieldType]}`
-            }}
+          <Icon>
+            {h(iconFieldMap[fieldType[column.fieldType]], {
+              class: `svg-icon field-icon-${fieldType[column.fieldType]}`
+            })}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '100px' }}>
diff --git a/core/core-frontend/src/views/visualized/data/datasource/index.vue b/core/core-frontend/src/views/visualized/data/datasource/index.vue
index f9efc2a3cc..7484e98d41 100644
--- a/core/core-frontend/src/views/visualized/data/datasource/index.vue
+++ b/core/core-frontend/src/views/visualized/data/datasource/index.vue
@@ -243,10 +243,9 @@ const generateColumns = (arr: Field[]) =>
       <div class="flex-align-center">
         <ElIcon style={{ marginRight: '6px' }}>
           <Icon className={`field-icon-${fieldType[column.deType]}`}>
-            {{
-              ...iconFieldMap[fieldType[column.deType]],
-              className: `svg-icon field-icon-${fieldType[column.deType]}`
-            }}
+            {h(iconFieldMap[fieldType[column.deType]], {
+              class: `svg-icon field-icon-${fieldType[column.deType]}`
+            })}
           </Icon>
         </ElIcon>
         <span class="ellipsis" title={column.title} style={{ width: '120px' }}>