Icon above text in ion-button

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,

Try this out.

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

.custom-button-content {
  display: flex;
  flex-direction: column;
  align-items: center;

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

1 Like