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.

Cathedral

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.

Benzaldehyde

Thank you, it worked! The size can be customised now, but the position is not in the centre, it shifted to the right bottom for some reason. What can be the reason? – Cathedral

can you give me the html? btw <ion-fab center bottom> this will put your fab button align on the center and at the bottom of your page but if you have <ion-fab right bottom> you will have the button on the righ bottom corner – Benzaldehyde

Yeah, I used centre middle, cause I basically need a big clickable circle in the centre of the screen. <ion-fab center middle> <button ion-fab mini><ion-icon name="start">Start</ion-icon></button> </ion-fab> – Cathedral

I also tried to play with position, alignment attributes in .scss file, didn't work – Cathedral

i try this <ion-fab center middle> on my code and it works so what its your code? – Benzaldehyde

uploaded it above – Cathedral

with only my code and the sass i mention the button go bottom? i have that and its works you dont have any other class right? – Benzaldehyde

Tested for relatively small sized, works well - it's in the centre. Ones increase to a certain size(i.e. 280px), is shifts closer to the right bottom – Cathedral

Woa didnt expect that ill test that asap – Benzaldehyde

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

Colwen

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

Humes

Answer 4

It is possible with style binding in Angular change size of Ion Fab even dynamically and after resize operation, you have to recalculate and set the top-left position (using ratio coordinates x,y)

<ion-col> <!--parent element-->
 <ion-fab #fab>
  <ion-fab-button
   [style.width]="getDiameter()"
   [style.height]="getDiameter()"

(obtain element by using @ViewChild('fab', { read: ElementRef, static: false }) fab: ElementRef;)

fab.nativeElement.style.left = (x -  this.radius/parentWidth) * 100 + '%';
fab.nativeElement.style.top = (y - this.radius/parentHeight) * 100 + '%';

getDiameter() {
    return this.radius* 2 + 'px'; // radius*2 = diameter
}

(The parent may have style="position: relative;".)

Rigel

Answer 5

There is a size property: https://ionicframework.com/docs/api/fab-button#size

But unfortunately it changes it only a little and in total there is only two different sizes available with this attribute

Eckman

Answer 6

You may use ion-fab-button:

<ion-fab center middle>
    <ion-fab-button size="small" color="blue" class="fabStartBtn">
       <ion-icon name="start">Start</ion-icon>
    </ion-fab-button>
</ion-fab>

See documentation here https://ionicframework.com/docs/api/fab-button

Chef