Add icon to ion-option in ion-select

Ionic Framework ionic-v3
1

is it possible to add icon to ion-option in ion-select ?

something like this

<ion-select  name="type">
        <ion-option value="bar"><ion-icon name="stats"></ion-icon>Bar</ion-option>
        <ion-option value="pie"><ion-icon name="pie"></ion-icon>Pie</ion-option>
</ion-select>
2

Have you tried? Because then you probably know the answer :wink: (which is not possible atm as far as I know).

3

thank you for your answer
Yes I tried I think it’s not possible

4

Select has multiple display options. If you use the popover one, you can pretty much write the entire view, including doing what you are trying to do here.

5

This worked for me.

using CSS to modify the inner span in the button tag of each option, removing radius and assigning a brackground image

the options keep the same order, and that is why the attribute selector worked for me

.alert-radio-icon{
    border-radius: 0 !important;
    border: none !important;
    height: 40px !important;
    width: 40px !important;
    background-size: 40px 40px !important;
    background-repeat: no-repeat ;
}

[id^="alert-input-"][id$="-0"] .alert-radio-icon{
    background-image: url("../assets/images/menu/flag_ni.png") !important;
}
 [id^="alert-input-"][id$="-1"] .alert-radio-icon{
    background-image: url("../assets/images/menu/flag_gt.png") !important;
}
.alert-radio-inner{
    background-color: transparent !important;
}

Selection_191

6

Is there an html sample?

7

Hi man.
I need to do the same.

I follow your example but it does not work.

Can you help me??

My code:

HTML

          <ion-item>
              <ion-label stacked>Cultivo</ion-label>
              <ion-select [(ngModel)]="todas" formControlName="producto" (ionChange)="onSelectChangeProd($event)">
                <ion-option *ngFor="let p of jsonproductos" value="{{p.id}}">
                    {{p.nombre}}
                </ion-option>
              </ion-select>
            </ion-item>

CSS

    .alert-radio-icon{
        border-radius: 0 !important;
        border: none !important;
        height: 40px !important;
        width: 40px !important;
        background-size: 40px 40px !important;
        background-repeat: no-repeat ;
    }
    
    [id^="alert-input-"][id$="0"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/1.png") !important;
    }
     [id^="alert-input-"][id$="1"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/2.png") !important;
    }
    [id^="alert-input-"][id$="2"] .alert-radio-icon{
        background-image: url("../../assets/imgs/cultivos/3.png") !important;
    }    
    .alert-radio-inner{
        background-color: transparent !important;
    }

Thanks.

8

did you can help because i have the same problem

9

from what I saw, apparently it is an ionic issue, because it compiles all the scss in the same field, and does not respect the owner file.
Then, there is no solution. :frowning:

If you find any solution, please paste it here.

10

hey you can try this …

this worked for me …
Check out this site :
https://www.alt-codes.net/star_alt_code.php

i used this code : ✰

so my code looks like this :

<ion-item>
            <ion-label>Member's Overall Rating</ion-label>
            <ion-select [(ngModel)]="newreport.memberstatus">
            <ion-option value="&#10032;">&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;">&#10032;&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;&#10032;">&#10032;&#10032;&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;&#10032;&#10032;">&#10032;&#10032;&#10032;&#10032;</ion-option>
            <ion-option value="&#10032;&#10032;&#10032;&#10032;&#10032;">&#10032;&#10032;&#10032;&#10032;&#10032;</ion-option>
            </ion-select>
            </ion-item>

the result is this (screenshot on my phone cause im testing on my phone) :

IMG_5049
IMG_5049.jpg741×828 85 KB