Ionic 2 Align Button Label to left

Question

I created a button in Ionic 2 as follows:

  <button secondary block round padding style="text-align : left;">
    <ion-icon ios="ios-key" md="md-key"></ion-icon>
    Login
  </button>

I am trying to align the button text to left side but its not coming there. Is there build in twik available to achieve that?

Answer 1

Ionic wraps the contents of the button into a <span> tag which has the class .button-inner. So the HTML markup looks something like this when you inspect it

<button secondary block round padding>
    <span class="button-inner">            
        <ion-icon ios="ios-key" md="md-key" item-right></ion-icon>
        Login
    </span>    
    <ion-button-effect></ion-button-effect>
</button>

The .button-inner class applies flexbox properties to position the text and icons central. You can overwrite the justify-content property and change the value from center to flex-start and this will tell the content (the text and icon) to start from the beginning of the box.

Example

If you want to apply it to all buttons

.button-inner{
    justify-content:flex-start;
}

If you want to apply it to a specific button (where .specific-button is added as a class to a button component)

.specific-button .button-inner{
     justify-content:flex-start;
}