Center ionic-select with icon on the left


#1

I need to put a select with an icon on the left and let the select menu centered, like in the image below.

I have tried the following code:

<ion-item>
  <ion-label> <ion-icon name="heart"></ion-icon></ion-label>
  <ion-select [(ngModel)]="field" placeholder="Menu" text-center>
    <ion-option value="dev" text-center>Developer</ion-option>
    <ion-option value="poet" text-center>Poet</ion-option>
    <ion-option value="desg" text-center>Designer</ion-option>
  </ion-select>      
</ion-item>

But it produces this:

Any idea?

Thanks,


#2

Give a class to this ion-item and do this on your class:

ion-label {
    -webkit-flex: none!important; 
    flex: none!important; 
}

#3

that’s worked. :slightly_smiling_face: