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

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!