Add icon to ionic option in ionic select

Question

Is it possible to add an icon to an ionic option in a select ion? sort of

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

Answer 1

It worked for me.

using CSS to change the inner range in the button tag for each option, removing the radius and assigning a graphic image

the parameters keep the same order, and therefore 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;
    }

Answer 2

The best I could think of was to use Unicode characters as content with ions. Like this one: 📊

Answer 3

Ionic. Kensodeman

, - , .

Answer 4

, ...

this worked for me .. Check 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 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 because I'm testing on my phone):

screenshot of what the results will look like