Is there an official way to place a icon in button above the text? On top, center.
Or do we need to hack a bit css? Is there a solid elegant solution?
By “hacking”:
.button-inner {
flex-flow: column;
}
optional add a bit margin / padding to the icon. If so you have to reset the button height. It’s a bit ugly to overwrite these all special ionic styles.
It’s really lame, that this is not an official feature.
Update:
Another solution: Wrap it in a div.
<button ion-button large>
<div>
<ion-icon name="logo-twitter"></ion-icon>
<div>Click me</div>
</div>
</button>
You have to change the button height if you want it a bit prettier. (e.g. with icon margin)
.button-icon-top {
height: 5em;
.button-inner {
flex-flow: column;
.icon {
margin-bottom: 10px;
font-size: 2em;
}
}
}
Just add the class name to your button.
<button ion-button full large class="button-icon-top">
<ion-icon name="logo-twitter"></ion-icon>
<span>Click me</span>
</button>