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

Question

THE SITUATION:

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

The problem is that somehow the ion-button directive force the button to be on one line.

I need the ion-button directive to be sure the button has always the proper formatting and positioning responsively. I just need that button to be on two lines.

This the html and css of my attempt:

THE 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>

THE CSS:

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

THE QUESTION:

How can I make a ion-button on two lines?

Thanks!

Answer 1

You are along the right lines. A slight modification is needed for it to work.

Here is my markup:

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

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

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

Answer 2

This will do the trick:

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

This will change the element ordering from horizontal to vertical.

Answer 3

You have to change the button height if you want it a bit prettier. (e.g. with icon margin)

.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>