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

November 25, 2016, at 11:03 PM


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:


        <button ion-button menuToggle="left" start>
        <ion-icon name="menu"></ion-icon> <br />
        <p class="menuSubTitle">MENU</p>
        <button ion-button menuToggle="right" end>
        <ion-icon name="person"></ion-icon> <br />
        <p lass="menuSubTitle">LOGIN</p>


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


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


Answer 1

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

Here is my markup:

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

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.

Rent Charter Buses Company
CSS - why my browsers can&#39;t reflect any changes made on the server?

CSS - why my browsers can't reflect any changes made on the server?

I was working on some CSS code and then suddenly the server stopped reflecting any changed made on the serverAt first I thought it was a caching problem but I disabled caching on my browser and even tried using different browsers but still it's using the old version...

Bad layout and wrapping on simple Bootstrap page

Bad layout and wrapping on simple Bootstrap page

I am trying to create a simple Bootstrap page that has four input fields each with a side buttonThe four input fields to be in a line horizontally and centered across the screen

navigation tabs with changing icon image

navigation tabs with changing icon image

I am trying to make tab navigation with changing image icon, I tried to do it with angular ng-show & ng-hid for icon images but the result was flickeringIs there any easier way to do it?enter image description here

Fixed element out of screen on mobile

Fixed element out of screen on mobile

I am developing a widget which could be embedded into the page as an iframe (iframe will be injected and styled via javascript)Iframe should be placed in bottom right corner