Button ion-fab with ngFor

Heya!

I have a question about some, maybe css issues?
I have a fab-list with fab buttons. I’m creating the buttons with ngFor since I want to keep it in an object with possibility to enable/disable them.

it looks like this:

  <!-- FAB LIST -->
  <ion-fab bottom right (click)='dim.toggle()'>
    <button ion-fab><ion-icon name='add'></ion-icon></button>
    <ion-fab-list side='top'>
      <button *ngFor='let item of fabs' ion-fab (click)='fabAction($event, item.action)'>
        <div *ngIf='item.display'>
          <ion-icon name="{{item.icon}}"></ion-icon>
          <ion-label>{{item.label}}</ion-label>
        </div>
      </button>
    </ion-fab-list>
  </ion-fab>

The problem is that when doing it in an ngFor loop the icon gets displaced.
When writing it directly in the HTML like this there is no issue:

<button ion-fab>
    <ion-icon name="add-circle"></ion-icon>
    <ion-label>Label</ion-label>
</button>

So, question is, am I doing something wrong or is it just compiling wrong? Can I add classes to it separately, do some workaround?

Imgur