diff --git a/packages/components/rate/src/rate.vue b/packages/components/rate/src/rate.vue
index d9a71c2155062..52dc14a12caec 100644
--- a/packages/components/rate/src/rate.vue
+++ b/packages/components/rate/src/rate.vue
@@ -30,10 +30,10 @@
           ns.is('active', item <= currentValue),
         ]"
       >
-        <component
-          :is="iconComponents[item - 1]"
-          v-if="!showDecimalIcon(item)"
-        />
+        <template v-if="!showDecimalIcon(item)">
+          <component :is="activeComponent" v-show="item <= currentValue" />
+          <component :is="voidComponent" v-show="!(item <= currentValue)" />
+        </template>
         <el-icon
           v-if="showDecimalIcon(item)"
           :style="decimalStyle"
@@ -49,13 +49,15 @@
   </div>
 </template>
 <script lang="ts" setup>
-import { type CSSProperties, computed, inject, ref, watch } from 'vue'
+import { computed, inject, markRaw, ref, watch } from 'vue'
 import { EVENT_CODE, UPDATE_MODEL_EVENT } from '@element-plus/constants'
-import { hasClass, isArray, isObject } from '@element-plus/utils'
+import { hasClass, isArray, isObject, isString } from '@element-plus/utils'
 import { formContextKey, formItemContextKey } from '@element-plus/tokens'
 import { ElIcon } from '@element-plus/components/icon'
 import { useFormItemInputId, useNamespace, useSize } from '@element-plus/hooks'
 import { rateEmits, rateProps } from './rate'
+import type { iconPropType } from '@element-plus/utils'
+import type { CSSProperties, Component } from 'vue'
 
 function getValueFromMap<T>(
   value: number,
@@ -147,34 +149,37 @@ const decimalStyle = computed(() => {
     width,
   }
 })
-const componentMap = computed(() =>
-  isArray(props.icons)
+const componentMap = computed(() => {
+  let icons = isArray(props.icons) ? [...props.icons] : { ...props.icons }
+  icons = markRaw(icons) as
+    | Array<string | Component>
+    | Record<number, string | Component>
+  return isArray(icons)
     ? {
-        [props.lowThreshold]: props.icons[0],
+        [props.lowThreshold]: icons[0],
         [props.highThreshold]: {
-          value: props.icons[1],
+          value: icons[1],
           excluded: true,
         },
-        [props.max]: props.icons[2],
+        [props.max]: icons[2],
       }
-    : props.icons
-)
+    : icons
+})
 const decimalIconComponent = computed(() =>
   getValueFromMap(props.modelValue, componentMap.value)
 )
 const voidComponent = computed(() =>
-  rateDisabled.value ? props.disabledVoidIcon : props.voidIcon
+  rateDisabled.value
+    ? isString(props.disabledVoidIcon)
+      ? props.disabledVoidIcon
+      : (markRaw(props.disabledVoidIcon) as typeof iconPropType)
+    : isString(props.voidIcon)
+    ? props.voidIcon
+    : (markRaw(props.voidIcon) as typeof iconPropType)
 )
 const activeComponent = computed(() =>
   getValueFromMap(currentValue.value, componentMap.value)
 )
-const iconComponents = computed(() => {
-  const result = Array.from({ length: props.max })
-  const threshold = currentValue.value
-  result.fill(activeComponent.value, 0, threshold)
-  result.fill(voidComponent.value, threshold, props.max)
-  return result
-})
 
 function showDecimalIcon(item: number) {
   const showWhenDisabled =