feat(components): [alert] add icon slot (#20034)

* feat(components): [alert]add icon slot

* refactor(components): [alert] move default iconComponent into icon slot

* chore: update version

---------

Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>

docs/en-US/component/alert.md

@@ -41,7 +41,7 @@ alert/close-button
 
 Displaying an icon improves readability.
 
-:::demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type.
+:::demo Setting the `show-icon` attribute displays an icon that corresponds with the current Alert type. Or use the `icon` slot to customize icon.
 
 alert/icon
 
@@ -98,7 +98,8 @@ alert/icon-description
 
 ### Slots
 
-| Name    | Description                       |
-| ------- | --------------------------------- |
-| default | content of the alert description. |
-| title   | content of the alert title.       |
+| Name          | Description                       |
+| ------------- | --------------------------------- |
+| default       | content of the alert description. |
+| title         | content of the alert title.       |
+| icon ^(2.9.7) | content of the alert icon.        |

docs/examples/alert/icon.vue

@@ -4,9 +4,18 @@
     <el-alert title="Info alert" type="info" show-icon />
     <el-alert title="Warning alert" type="warning" show-icon />
     <el-alert title="Error alert" type="error" show-icon />
+    <el-alert title="Error alert with custom icon" type="error" show-icon>
+      <template #icon>
+        <Bell />
+      </template>
+    </el-alert>
   </div>
 </template>
 
+<script lang="ts" setup>
+import { Bell } from '@element-plus/icons-vue'
+</script>
+
 <style scoped>
 .el-alert {
   margin: 20px 0 0;

packages/components/alert/src/alert.vue

@@ -6,10 +6,12 @@
       role="alert"
     >
       <el-icon
-        v-if="showIcon && iconComponent"
+        v-if="showIcon && ($slots.icon || iconComponent)"
         :class="[ns.e('icon'), { [ns.is('big')]: hasDesc }]"
       >
-        <component :is="iconComponent" />
+        <slot name="icon">
+          <component :is="iconComponent" />
+        </slot>
       </el-icon>
 
       <div :class="ns.e('content')">