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

Question

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

Answer 1

You wont have a choice but to use sass. I'm not answering your question but are you sure you want it this way ??
You can do it this way ?
<button large >
<ion-icon name='home' class="breakme"></ion-icon>
Home
</button>
Or you can have lists with onclicks (click)="calendar" and fake it with a list?
<ion-list no-lines>
<ion-item (click)="getData()">
<ion-icon name="leaf"></ion-icon>
<br />
Herbology
</ion-item>
<ion-item (click)="getData()">
<ion-icon name="add"></ion-icon>
<br />
Calander
</ion-item>
</ion-list>

Answer 2

ok, I found a solution... Thank you Justin Willis
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;
}