Search code examples
ionic-frameworkiconsion-select

Replacing the <ion-select> button texts by icons

I am looking for a way to replace the placeholder texts in an ion-select action sheet with icons instead of simple text.

enter image description here

Now, I know the texts can be changed by adding ‘okText’ and ‘cancelText’ to the HTML:

<ion-select multiple="true" [(ngModel)]="selectedGenres" (ionChange)="filterByGenre()" okText="Okido!" cancelText="Nah, whatever..">
        <ion-option *ngFor="let genre of genreList" value="{{genre}}">{{genre}}</ion-option>
</ion-select>

But what would be the best ways to add icons to those buttons?

For instance, I would like to replace the OK text with e.g. ‘ion-android-checkbox-blank’ icon and CANCEL text with e.g. ‘ion-android-close’ icon.

Solution

  • Not directly possible. You can use ionic modal to create your own selection list with your own buttons.

    As an alternative, you may want to test emojis like ❌ and ✔️, but they will look different from device to device.