diff --git a/docs/en-US/component/select.md b/docs/en-US/component/select.md
index ddae25cff1..22e6320b2c 100644
--- a/docs/en-US/component/select.md
+++ b/docs/en-US/component/select.md
@@ -146,6 +146,7 @@ If the binding value of Select is an object, make sure to assign `value-key` as
| automatic-dropdown | for non-filterable Select, this prop decides if the option menu pops up when the input is focused | boolean | - | false |
| clear-icon | Custom clear icon component | string / Component | — | CircleClose |
| fit-input-width | whether the width of the dropdown is the same as the input | boolean | — | false |
+| suffix-icon | Custom suffix icon component | string / Component | — | ArrowUp |
## Select Events
diff --git a/packages/components/select/__tests__/select.spec.ts b/packages/components/select/__tests__/select.spec.ts
index 06420fe5ae..33356f45cc 100644
--- a/packages/components/select/__tests__/select.spec.ts
+++ b/packages/components/select/__tests__/select.spec.ts
@@ -2,7 +2,7 @@ import { nextTick } from 'vue'
import { mount } from '@vue/test-utils'
import { sleep } from '@element-plus/test-utils'
import { EVENT_CODE } from '@element-plus/utils/aria'
-import { CircleClose } from '@element-plus/icons'
+import { CircleClose, ArrowUp, CaretTop } from '@element-plus/icons'
import Select from '../src/select.vue'
import Group from '../src/option-group.vue'
import Option from '../src/option.vue'
@@ -540,6 +540,15 @@ describe('Select', () => {
expect(vm.value).toBe('')
})
+ test('suffix icon', async () => {
+ const wrapper = _mount(``)
+ let suffixIcon = wrapper.findComponent(ArrowUp)
+ expect(suffixIcon.exists()).toBe(true)
+ await wrapper.setProps({ suffixIcon: CaretTop })
+ suffixIcon = wrapper.findComponent(CaretTop)
+ expect(suffixIcon.exists()).toBe(true)
+ })
+
test('fitInputWidth', async () => {
const wrapper = getSelectVm({ fitInputWidth: true })
const selectWrapper = wrapper.findComponent({ name: 'ElSelect' })
diff --git a/packages/components/select/src/select.vue b/packages/components/select/src/select.vue
index dc294ec92c..bf5c56ec6e 100644
--- a/packages/components/select/src/select.vue
+++ b/packages/components/select/src/select.vue
@@ -234,7 +234,7 @@ import {
removeResizeListener,
} from '@element-plus/utils/resize-event'
import { isValidComponentSize } from '@element-plus/utils/validators'
-import { CircleClose } from '@element-plus/icons'
+import { CircleClose, ArrowUp } from '@element-plus/icons'
import ElOption from './option.vue'
import ElSelectMenu from './select-dropdown.vue'
import { useSelect, useSelectStates } from './useSelect'
@@ -315,6 +315,10 @@ export default defineComponent({
type: Boolean,
default: false,
},
+ suffixIcon: {
+ type: [String, Object] as PropType,
+ default: ArrowUp,
+ },
},
emits: [
UPDATE_MODEL_EVENT,
diff --git a/packages/components/select/src/useSelect.ts b/packages/components/select/src/useSelect.ts
index 92c797759d..719dedd92b 100644
--- a/packages/components/select/src/useSelect.ts
+++ b/packages/components/select/src/useSelect.ts
@@ -19,7 +19,6 @@ import scrollIntoView from '@element-plus/utils/scroll-into-view'
import { isKorean } from '@element-plus/utils/isDef'
import { getValueByPath, useGlobalConfig } from '@element-plus/utils/util'
import { elFormKey, elFormItemKey } from '@element-plus/tokens'
-import { ArrowUp } from '@element-plus/icons'
import type { QueryChangeCtx, SelectOptionProxy } from './token'
import type { ElFormContext, ElFormItemContext } from '@element-plus/tokens'
@@ -96,7 +95,7 @@ export const useSelect = (props, states: States, ctx) => {
return criteria
})
const iconComponent = computed(() =>
- props.remote && props.filterable ? '' : ArrowUp
+ props.remote && props.filterable ? '' : props.suffixIcon
)
const iconReverse = computed(() =>
iconComponent.value && states.visible ? 'is-reverse' : ''