Ionic 4 ion-select set custom icon for select-icon

Question

I need to set a custom icon to ion-select. Following is my code and output

<ion-item class="input-container" align-items-center no-padding>
  <ion-label position="floating" no-margin no-padding>I am a</ion-label>
  <ion-select formControlName="role" mode="ios" okText="Okay" cancelText="Cancel">
    <ion-select-option value="Admin">Admin</ion-select-option>
    <ion-select-option value="Customer">Customer</ion-select-option>
  </ion-select>
  <ion-icon color="primary" name="arrow-down" mode="ios" slot="end"></ion-icon>
</ion-item>

Is there any other way of set custom icon or can anyone suggest a way tohow to remove select-icon-inner

This is a bit tricky one currently. I would suggest creating a directive for this: https://stackoverflow.com/a/55303341/6294072 Unfortunately doesn't seem to be a better option currently. — AT82, May 01 '19 at 15:23

Javier Lorenzo · Answer 1 · 2021-10-24T21:12:22.647

7

You can override the content of the icon part. This worked for me, just go with:

ion-select::part(icon) {
  content: url('your-icon-path/your-icon.svg');
}

StackBlitz working example

edited Oct 24 '21 at 21:12

answered Oct 23 '21 at 23:39

Javier Lorenzo

121
1
6

Works well! This should be the accepted answer. It seems like the most correct way to solve the problem. – Zac Dec 08 '21 at 15:41

score 6 · Answer 2 · edited Dec 03 '20 at 07:56

6

In ionic v4 a workaround is hiding the icon through .scss file.

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

ion-select::part(text) {
  background-image: url(<ImageUrl>);
  background-position: right;
  background-repeat: no-repeat; 
}

edited Dec 03 '20 at 07:56

yanckst

438
4
17

answered Jul 04 '20 at 07:57

Shravani Palnati

69
1
3

score 2 · Answer 3 · answered Jun 09 '21 at 01:07

2

This worked for me in i5:

ion-select::part(icon) {
  opacity: 1;
  margin-left: 1em;
  color: transparent;
  background: url('assets/icons/light-mode/expand-down.svg') no-repeat center;
}

answered Jun 09 '21 at 01:07

Kirsten

171
1
3
13

score -2 · Answer 4 · answered Mar 26 '20 at 07:30

-2

It's not a proper solution but still, it can fix this problem. Apply this style in .scss file -

ion-select {
  min-width: 100vw;
}

answered Mar 26 '20 at 07:30

Ajoy Karmakar

671
7
14

Ionic 4 ion-select set custom icon for select-icon

4 Answers4