title: Ionic 2 - how to make ion-button with icon and text on two lines?
body: <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>