ionic: how to change the size of FAB icon

Question

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 
name="start">Start</ion-icon></button>
</ion-fab>  

.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.

Answer 1

Try to use this:

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

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.

Answer 2

Go into your theme/variables.scss file and override the $fab-size variable like this:

$fab-size: 70px; //Change value to whatever size you want

Answer 3

If you want to change the size of the fab and still have it centered add these classes to your scss.

ion-fab-button {
   width: 100px;
   height: 100px;
}

.fab-horizontal-center {
   margin-left: unset;
   margin-inline-start: -50px !important;
}

The margin-inline-start has to be the half of the width.

Reported the bug here: https://github.com/ionic-team/ionic-framework/issues/22564