feat: Support custom icons for `ion-select`

[cicixiaoyan]

Prerequisites

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

Ionic Framework Version

• [x] v4.x
• [x] v5.x
• [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.

[FazioNico]

looking forward for

[fer-fullstackdev]

I need this feature right now. Please let me know when can you do this?? Thanks

[dylan-westbury]

To explain further.

Currently ion-select icon sits in the shadow-root, so there is no way of disabling or editing it.

With our use case, we use the detail on ion-items, and floating labels for ion-inputs, ion-selects, etc.

For ion-select, it looks like this because we can't disable the select-icon.

Here it is in the html of the above ion-select

[fer-fullstackdev]

Hello, @dylan-westbury Thanks for the explanation. When can you implement this feature then?

[Lougnar]

Currently we can use ::part to change the icon. but it's only supported in the last versions of safari/safari ios and not supported yet in samsung browser. (I have 6% of my users on samsung browser) https://caniuse.com/#search=%3A%3Apart

we should maybe make a pull request to add a slot element, ::slotted is more supported.

[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.

[indraraj26]

Hi @liamdebeasi ,

We have searchIcon in ion-searchbar like that please add dropdownIcon where we can add svg and string from ionicon.

I tried but couldn't able to do it properly.

ion-select::part(icon) {
	display: none;
}

ion-select::part(text) {
	background-image: url(https://www.iconfinder.com/data/icons/ios-11-ui-elements-vol-1/29/25_dropdown_menu_down_arrow-512.png);
	background-position: right;
	background-repeat: no-repeat;
	background-size: 50%;
}

Playground link: https://codepen.io/indraraj26/pen/vYGPLMQ

[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.

[amandaejohnston]

Props for customizing the icons have been added via https://github.com/ionic-team/ionic-framework/pull/27648 and will be available in the next upcoming minor release of Ionic. Thank you!

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.