Ionic 2 - how to make ion-button with icon and text on two lines?
<p><strong>THE SITUATION</strong>:</p>

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

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

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

<p>This the html and css of my attempt:</p>

<p><strong>THE HTML</strong>:</p>

<pre class="lang-html prettyprint-override"><code>&lt;ion-header&gt;
  &lt;ion-navbar&gt;
    &lt;button ion-button menuToggle="left" start&gt;
      &lt;ion-icon name="menu"&gt;&lt;/ion-icon&gt; 
      &lt;br /&gt;
      &lt;p class="menuSubTitle"&gt;MENU&lt;/p&gt;
    &lt;/button&gt;
    &lt;ion-title&gt;
      HomePage
    &lt;/ion-title&gt;
    &lt;button ion-button menuToggle="right" end&gt;
      &lt;ion-icon name="person"&gt;&lt;/ion-icon&gt;
      &lt;br /&gt;
      &lt;p lass="menuSubTitle"&gt;LOGIN&lt;/p&gt;
    &lt;/button&gt;
  &lt;/ion-navbar&gt;
&lt;/ion-header&gt;
</code></pre>

<p><strong>THE CSS</strong>:</p>

<pre class="lang-css prettyprint-override"><code>.menuSubTitle {   
  font-size: 0.6em;
  float:left;
  display: block;
  clear: both;
}
</code></pre>

<p><strong>THE QUESTION</strong>:</p>

<p>How can I make a ion-button on two lines? </p>

<p>Thanks!</p>