[SOLVED] How to ion-button justify-content?

How to ion-button justify-content?

I have the following code:

<ion-button expand=“full” (click)=“do()“>
  <ion-icon name=“cart” slot=“start”></ion-icon>
  TEXT
</ion-button>

I want the content (the TEXT and the ion-icon) to be aligned to the left and tried:

ion-button {
  display: flex;
  justify-content: flex-start;
}

I thought this would result into aligning the content to the left but nothing happens. It seems that the css is totally ignored.

Solution

You can align the text and icon to the left if you add a div inside your button and use Ionic 4 CSS Utilities (in your case text-left / text-start).

<ion-button expand=“full” (click)=“do()“>
 <div text-left>
  <ion-icon name=“cart” slot=“start”></ion-icon>
  TEXT
 </div>
</ion-button>

Make sure to give the div the full width of the button

ion-button > div {
  width: 100%;
}