Larger FAB size

I am looking for a way to increase the size of the FAB button.
There’s a mini size attribute, but I am looking for large.

Any news on that ? I’m also looking for a solution. I try to set $fab-size but it’s not working

Nope, I stuck with the default size

I got it working!!!

if you set $fab-size or $fab-mini-size in src/theme/variables.scss
it is working perfectly.

Can you please post an example?

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
2 Likes

Can I use fab-size:%50 ?
this screen size change depends

Yes, thx thats exactly what i was looking for!

Use class .fab

Exemple:

home.scss

page-home {

.fab {
width: 100px !important;
height: 100px !important;
}

}

1 Like

this worked for me Thanks. because i didn’t wanted to change globally for all fab icons in theme/variable.scss

This will work for ionic 3/4/5

<ion-fab vertical="top" horizontal="start" slot="fixed" class="custom-fab"> <ion-fab-button> <ion-icon name="home"></ion-icon> </ion-fab-button> </ion-fab>

.custom-fab {
width: 100px !important;
height: 100px !important;
}