Ionic 2 - how to make an ionic button with an icon and text on two lines?

Question

SITUATION :

In my Ionic 2 app, I need to have a menu button on two lines: an icon and text.

The problem is that somehow the ion button directive forces the button to be on the same line.

I need an ion button directive so that the button always has the correct formatting and positioning. I just need this button to be on two lines.

This is the html and css of my attempt:

HTML :

<ion-header> <ion-navbar> <button ion-button menuToggle="left" start> <ion-icon name="menu"></ion-icon> <br /> <p class="menuSubTitle">MENU</p> </button> <ion-title> HomePage </ion-title> <button ion-button menuToggle="right" end> <ion-icon name="person"></ion-icon> <br /> <p lass="menuSubTitle">LOGIN</p> </button> </ion-navbar> </ion-header> 

CSS :

 .menuSubTitle { font-size: 0.6em; float:left; display: block; clear: both; } 

QUESTION :

How can I make an ionic button on two lines?

Thanks!

Answer 1

You are on the right track. A slight modification is necessary for its operation.

Here is my markup:

 <button ion-button block color="menu-o"> <div> <ion-icon name="flash"></ion-icon> <label>Flash</label> </div> </button> 

The internal <div> inside the <button> is a trick. The only thing needed for this markup is to set the <label> element to display: block .

Since <p> already a block level element. It may just work as it is.

Answer 2

This will do the trick:

 .button-inner { flex-flow: column; } 

This will change the order of the elements from horizontal to vertical.

Answer 3

You must change the height of the button if you want it to be a little prettier. (e.g. with a field icon)

 .button-icon-top { height: 5em; .button-inner { flex-flow: column; .icon { margin-bottom: 10px; font-size: 2em; } } } 

Just add the class name to your button.

 <button ion-button full large class="button-icon-top"> <ion-icon name="logo-twitter"></ion-icon> <span>Click me</span> </button>