How to change ion-select dropdown

Is there a way to change this image (edited)

on ion-select (edited)

to something like this (edited) ?

I don’t even think it’s an image, it looks like a div, but replacing it with an image would be cool since it easier than styling a div.

Mmm, not really. Since that arrow is part of shadowDOM, there’s no public API to change it. Honestly, I think it is better to keep the icon, as it follow consistent UI patterns that have been established on ios/android.

1 Like

Does it HAVE to be an ion-select?

There are a few options using CSS, Angular Material etc, at least if nothing else for ideas on the how.
some are Nasty tricks. Simply pointing you to some ideas, concepts. See what works for you and flavour to taste.

I had similar, but more “complexity” from UI team.
I used Popover, iOS style and a list, setup in a component.
Drop-down arrow from newicon set, onClick().
Job done, works like a charm and capable of VERY rich content in the “select-options”.

Simple, Just put following css :


Role 1
Role 2
Role 3

ion-select {
background-image: url(assets/images/custom_arrow_icon.svg);
background-repeat: no-repeat;
background-position: right;
ion-select::part(icon) {
display: none !important;