From 25f42aa9d7e049de69733a89d9c02acbed020c8b Mon Sep 17 00:00:00 2001
From: xinconan <xinconan@gmail.com>
Date: Sun, 9 Mar 2025 23:34:11 +0800
Subject: [PATCH] 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           | 11 ++++++-----
 docs/examples/alert/icon.vue            |  9 +++++++++
 packages/components/alert/src/alert.vue |  6 ++++--
 3 files changed, 19 insertions(+), 7 deletions(-)

diff --git a/docs/en-US/component/alert.md b/docs/en-US/component/alert.md
index ffab02dd5f..19a642a2fb 100644
--- a/docs/en-US/component/alert.md
+++ b/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.        |
diff --git a/docs/examples/alert/icon.vue b/docs/examples/alert/icon.vue
index 2aefef4493..eac5b58750 100644
--- a/docs/examples/alert/icon.vue
+++ b/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;
diff --git a/packages/components/alert/src/alert.vue b/packages/components/alert/src/alert.vue
index 31f7732b27..43708fa73b 100644
--- a/packages/components/alert/src/alert.vue
+++ b/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')">