CODEWITHSUNDEEP
ionic-frameworkionic2
tom_tom
tom_tom

Reputation: 465

ionic v2 Button text align

In my ionic v2 app I have several buttons with a icon and a text inside. With v1 of Ionic it was possible to align the icon and the text inside the button with a parameter. 

<a class="item item-icon-left item-assertive">
    <i class="icon ion-gear"></i>
    SomeTextForExample
</a>

For v2 i haven't found any parameter then 'icon-left', which adds only a little gap between the icon and the text. Anyway, content of the button stay's centered.

Here is my html code from v2:

<button ion-button block icon-left color="danger">
    <ion-icon name="car"></ion-icon>
    TextFoo
</button>

I've removed the ngFor and the click function for easier reading. Any possibilities for an easy solution?

Upvotes: 0

Views: 2903

Answers (3)

Mary
Mary

Reputation: 165

As far as we don't have a "legal" way to solve it with the item-end or icon-left we can use some css for button:

<button ion-button block icon-left color="danger" class="btn-align">
    <ion-icon name="car"></ion-icon>
    TextFoo
</button>

and class is

.btn-align {
    .button-inner { /*< --- this class added automatically */
        justify-content: flex-start;
     }
}

Upvotes: 2

SergeBlackDog
SergeBlackDog

Reputation: 13

I had this problem on android < v4.4

Upvotes: 0

Ram_T
Ram_T

Reputation: 8484

<button ion-button block icon-left color="danger">
    <ion-icon name="car"></ion-icon>
    TextFoo
</button>

this should work. Just make sure that you are giving a valid name in the <ion-icon>'s name property. ex: <ion-icon name="star"></ion-icon>

Upvotes: 1

Related Questions