Ionic-framework: Can I have icon-top for ion-button

[sonicwong]

Feature Request

Ionic version:


[x] 4.x

Describe the Feature Request

I want to place the icon on the top, and text on bottom in ion-button.
Same as the one available in ion-segment / ion-tab-button.

Describe Preferred Solution

Add "top" to slot attribute.
<ion-button> <ion-icon slot="top" name="star"></ion-icon> Top Icon </ion-button>

[brandyscarney]

As a workaround, this can also be accomplished by wrapping the inner button content in a div and using a line break:

<ion-button>
  <div>
    <ion-icon name="star"></ion-icon><br>
    Label
  </div>
</ion-button>

Or by styling the div as a flex container:

<ion-button>
  <div>
    <ion-icon name="star"></ion-icon>
    Label
  </div>
</ion-button>

ion-button div {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

[gabao]

As a workaround, this can also be accomplished by wrapping the inner button content in a div and using a line break:

<ion-button>
  <div>
    <ion-icon name="star"></ion-icon><br>
    Label
  </div>
</ion-button>

Or by styling the div as a flex container:

<ion-button>
  <div>
    <ion-icon name="star"></ion-icon>
    Label
  </div>
</ion-button>

ion-button div {
  display: flex;
  flex-flow: column nowrap;
  align-items: center;
}

Your comment just helped me a lot. TY