ionic: how to change the size of FAB icon
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
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
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.