Customization of ion-select

Ionic Framework
1

<ion-select interface=“action-sheet” placeholder=“address” [(ngModel)]=“AddressId” (ionChange)=“selectAddress(AddressId)”>
<ng-container *ngFor=“let ad of userAddresses”>
{{ad?.addressTitle}}

ion-select-option value=“0”> current location</ion-select-option
ion-select-option value=“new”>add new address</ion-select-option

i want to customize ion-select-option to add ion-icon at start and add some margins. i tried everything but nothing worked. i would be very thankful if you help me

2

You can get help from this ionic forum question link

https://forum.ionicframework.com/t/add-icon-to-ion-option-in-ion-select/103580

3

nothing worked for me in this post

4

Hi, I think you could try this solution:

for now - why don’t you fake it, use an ion-item, stick an icon with the down arrow in the end slot.
Then on click, show your picker interface programmatically.
Set the ion-item label to whatever your choice is.

quote from daveshirman’s comment at feat: Add 'picker' interface for ion-select component · Issue #20317 · ionic-team/ionic-framework · GitHub

I also made a stackblitz playground as a proof of concept, it seems to work really nice.

By doing this way, you can directory modify the button (ion-button: Style Buttons with Custom CSS Properties) and the action sheet (ion-action-sheet: Action Sheet Dialog for iOS and Android) to make it fit your design.

Hope this is helpful :smile:

5

No need to add extra package for something so simple. Just place the icon tag within the ion-select tag and use css to position it. Example below:

   .select-icon {
     position: fixed;
     top: 10px;
     right: 10px;
   }