Ionicons inside ion-select / ion-option

I am trying to put a rating module. So my code looks like this,

<ion-item>
            <ion-label>Rating</ion-label>
            <ion-select [(ngModel)]="surveyData.star" name="stars">
                <ion-option value="1">
                    <ion-icon name="star"></ion-icon>
                </ion-option>
                <ion-option value="2">
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                </ion-option>
                <ion-option value="3">
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                </ion-option>
                <ion-option value="4">
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                </ion-option>
                <ion-option value="5">
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                    <ion-icon name="star"></ion-icon>
                </ion-option>
            </ion-select>
        </ion-item>

But this doesn’t output the expected result. Instead, just a blank alert.

But if I put text instead of ionicons it comes. Am I doing something wrong or is there a fix or workaround for this?

1 Like

Any Solution on this ?