Ionic-framework: how to break line in ionic 2 elements like buttons

[MortezaAghili]

i have a few buttons in my app's screen and i want use Icon and below of that, write the title of the button...

in ionic 2 i can't use "< br>" or h1,h2 or even display block for this purpose.

code:

<button primary>
     <ion-icon name="calendar"></ion-icon>
     Calendar
</button>

i tried like this:

<button primary>
     <h1>
         <ion-icon name="calendar"></ion-icon>
     </h1>
     <br />
     <h2>
         Calendar
     </h2>
</button>

thanks

[jgw96]

Hey @MortezaAghili ! Thanks for opening an issue with us. Instead of using extra html inside your button you can actually achieve this with just a touch of css. You can simply change the button-inner class to have a flex-flow of column. So you could just use something like this

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

Thanks for using Ionic!

[AMetnik]

What if this feature is only desired on some buttons and not all ?

[japostigo-atsistemas]

@AMetnik then add a class to identify that custom icons.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.