Text under icon on a button Ionic 2

Ionic Framework ionic-v3
1

How can I put a text under the icon on a button?

The idea is below but this stays icon right to the text. I need text under the icon.

        <ion-col width-33>
            <button clear block>
                <ion-icon name="call"></ion-icon>
                Call
            </button>
        </ion-col>

Thanks

2

I think that it’s not supported by default (or at least a quick search didn’t returned any results) therefore you’ll have to write some custom CSS to achieve it, here’s a basic starting point:

        <ion-col width-33>
            <button clear block class="text-on-bottom">
                <ion-icon name="call"></ion-icon>
                Call
            </button>
        </ion-col>

.text-on-bottom > .button-inner {
  flex-direction: column;
}
9 Likes
3

@iignatov Thank you so much :slight_smile: