feat(components): [switch] add custom action icon prop (#13746)

docs/en-US/component/switch.md

@@ -79,6 +79,14 @@ switch/prevent-switching
 
 :::
 
+## custom action icon
+
+:::demo You can add `active-action-icon` and `inactive-active-icon` attribute to show icons.
+
+switch/custom-action-icon
+
+:::
+
 ## API
 
 ### Attributes
@@ -93,6 +101,8 @@ switch/prevent-switching
 | inline-prompt                | whether icon or text is displayed inside dot, only the first character will be rendered for text                                                | ^[boolean]                                       | false   |
 | active-icon                  | component of the icon displayed when in `on` state, overrides `active-text`                                                                     | ^[string] / ^[Component]                         | —       |
 | inactive-icon                | component of the icon displayed when in `off` state, overrides `inactive-text`                                                                  | ^[string] / ^[Component]                         | —       |
+| active-action-icon           | component of the icon displayed in action when in `on` state                                                                                    | ^[string] / ^[Component]                         | —       |
+| inactive-action-icon         | component of the icon displayed in action when in `off` state                                                                                   | ^[string] / ^[Component]                         | —       |
 | active-text                  | text displayed when in `on` state                                                                                                               | ^[string]                                        | ''      |
 | inactive-text                | text displayed when in `off` state                                                                                                              | ^[string]                                        | ''      |
 | active-value                 | switch value when in `on` state                                                                                                                 | ^[boolean] / ^[string] / ^[number]               | true    |

docs/examples/switch/custom-action-icon.vue

@@ -0,0 +1,13 @@
+<template>
+  <el-switch
+    v-model="value1"
+    :active-action-icon="View"
+    :inactive-action-icon="Hide"
+  />
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { Hide, View } from '@element-plus/icons-vue'
+const value1 = ref(true)
+</script>

packages/components/switch/__tests__/switch.test.tsx

@@ -2,7 +2,7 @@ import { markRaw, nextTick, ref } from 'vue'
 import { mount } from '@vue/test-utils'
 import { afterEach, describe, expect, test, vi } from 'vitest'
 import { debugWarn } from '@element-plus/utils'
-import { Checked, CircleClose } from '@element-plus/icons-vue'
+import { Checked, CircleClose, Hide, View } from '@element-plus/icons-vue'
 import { ElFormItem } from '@element-plus/components/form'
 import Switch from '../src/switch.vue'
 import type { VueWrapper } from '@vue/test-utils'
@@ -310,6 +310,32 @@ describe('Switch.vue', () => {
     expect(value.value).toEqual(true)
   })
 
+  test('custom action icon', async () => {
+    const value = ref(true)
+    const wrapper = mount(() => (
+      <div>
+        <Switch
+          v-model={value.value}
+          activeActionIcon={View}
+          inactiveActionIcon={Hide}
+        />
+      </div>
+    ))
+
+    const coreWrapper = wrapper.find('.el-switch__core')
+    const switchWrapper = wrapper.findComponent(Switch)
+    const switchVm = switchWrapper.vm
+    const inputEl = switchVm.$el.querySelector('input')
+
+    expect(switchWrapper.classes('is-checked')).toEqual(true)
+    expect(inputEl.checked).toEqual(true)
+    expect(wrapper.findComponent(View).exists()).toBe(true)
+
+    await coreWrapper.trigger('click')
+    expect(switchWrapper.classes('is-checked')).toEqual(false)
+    expect(inputEl.checked).toEqual(false)
+    expect(wrapper.findComponent(Hide).exists()).toBe(true)
+  })
   describe('form item accessibility integration', () => {
     test('automatic id attachment', async () => {
       const wrapper = mount(() => (

packages/components/switch/src/switch.ts

@@ -59,6 +59,18 @@ export const switchProps = buildProps({
     type: Boolean,
     default: false,
   },
+  /**
+   * @description component of the icon displayed in action when in `on` state
+   */
+  inactiveActionIcon: {
+    type: iconPropType,
+  },
+  /**
+   * @description component of the icon displayed in action when in `off` state
+   */
+  activeActionIcon: {
+    type: iconPropType,
+  },
   /**
    * @description component of the icon displayed when in `on` state, overrides `active-text`
    */

packages/components/switch/src/switch.vue

@@ -44,6 +44,12 @@
         <el-icon v-if="loading" :class="ns.is('loading')">
           <loading />
         </el-icon>
+        <el-icon v-else-if="activeActionIcon && checked">
+          <component :is="activeActionIcon" />
+        </el-icon>
+        <el-icon v-else-if="inactiveActionIcon && !checked">
+          <component :is="inactiveActionIcon" />
+        </el-icon>
       </div>
     </span>
     <span