Icon above text in ion-button

Ionic Framework ionic-v3
1

Hi all.

I’d like to have a ion-button with an icon and a text, but I cannot seem to get a way where I can get the icon above the text, much like a tab button.
In older versions of Ionic you could alter .inner-button { flex-direction: column } but this is no longer possible with shadow dom.

Any ideas?

Best regards,
Simon

2

Try this out.

<ion-button>
  <div class=“custom-button-content”>
    <ion-icon name="star"></ion-icon>
    <ion-label>Left Icon</ion-label>
  </div>
</ion-button>


.custom-button-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}```
3 Likes
3

Haha, such a hacky yet lovely solution - I dont know why I didn’t think about that.
Cheers mate!

1 Like