ionic: how to change the size of FAB icon



I am new to cross-platform dev. Struggling with changing the size of FAB.
This is what I have now:

<ion-fab center middle>
<button ion-fab color="blue" class="fabStartBtn"><ion-icon 

.fabStartBtn {
font-size: 72px;

But the size is still the same. How can I get access to the button attribute? I tried id, name, #name, :before – didn’t work.


Try to use this:

<ion-fab center bottom>
  <button ion-fab mini><ion-icon name="add"></ion-icon></button>

If you use the mini attribute you can modify the size with this:

.fab[mini] {
    margin: 8px;
    width: 40px;
    height: 40px;
    line-height: 40px;

If you modify that class you can make the FAB button bigger or smaller.

Answered By – Fernando Del Olmo

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave A Reply

Your email address will not be published.

This website uses cookies to improve your experience. We'll assume you're ok with this, but you can opt-out if you wish. Accept Read More