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

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.

This will do the trick:

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

This will change the element ordering from horizontal to vertical.

Related