How to ion-button justify-content?

Question

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.

Answer 1

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%;
}

Documentation:
Ionic 4 CSS Utilities