feat: Support custom icons for `ion-select`

Prerequisites

• I have read the Contributing Guidelines.
• I agree to follow the Code of Conduct.
• I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

• v4.x
• v5.x
• v6.x
• Nightly

Current Behavior

Developers are unable to customize the icon that is displayed with ion-select. Developers can change the color of the icon by using CSS:

ion-select::part(icon) {
  color: red;
}

But this does not allow the flexibility for developers to customize the icon used.

Ideally, developers would like a property or slot that can be used to customize the icon that is used.

@Prop() toggleIcon = chevronDown;

<ion-select [toggleIcon]="arrowDown"></ion-select>

This icon could then be styled using CSS shadow parts, as the existing implementation is today.

[sean-perkins]

Hello everyone 👋 doing some housekeeping here to get this feature request up to date. I will be updating the original poster’s description to reflect my understanding of this feature request. Please let me know if that is inconsistent with your expectations or if you have additional requirements you would like to include.

The problem Ionic developers are facing is that the ion-select icon is created through CSS. Developers can change the color of this icon with the following CSS:

ion-select::part(icon) {
  color: red;
}

But they cannot customize the icon that is rendered. The ask here, is to support either a slot for developers to customize what is used as the “icon” for ion-select or allowing developers to pass through an ion-icon to be used.

Similar implementation patterns that exist for reference:

• ion-accordion has @Prop() toggleIcon = chevronDown which allows developers to specify a different toggleIcon in their implementations.

[kawazoe]

I just noticed that this feature was added by #20605 but was then removed for the 5.1 release ( #21108 ). I too would like to be able to customize the style of the icon with an svg instead of the default border one.