The call to onClick with ion-fab-button does not work

I create the buttons with the ion-fab-button tags but they don’t work like buttons, even though they have the tag (click). I press and nothing happens.

<ion-fab  vertical="bottom" horizontal="end" >
    <ion-fab-button (click)="func()">
      <ion-icon name="add"></ion-icon>
    </ion-fab-button>
  </ion-fab>

try this one.

It’s practically the same code, what doesn’t work for me is (click). Pressing the buttons nothing happens. I copy the .ts and .css

Is it giving any error or something in console?

No, I only have the icons and pressing them nothing happens.

imagen

.ts code

 buttonDetials: any;
  constructor(private api: ApiService) {
    this.buttonDetials = [
      { label: "Add", icon: "add", color: "warning", onclick: function() {console.log('Hello Add')}},
      { label: "Close", icon: "close", color: "warning", onclick: function() {console.log('Hello Close')} },
      { label: "Approve", icon: "checkmark", color: "warning", onclick: function() {console.log('Hello Approve')} }
    ];
  }

  func(details) {
   details.onclick();
  }

.html code

<ul>
  <li *ngFor="let details of buttonDetials">
    <ion-fab right bottom>
      <ion-fab-button color='details.color' (click)="func(details)">
        <ion-icon name="details.icon"></ion-icon>
      </ion-fab-button>
    </ion-fab>
  </li> 
</ul>

console
image

The problem is with the CSS but I can’t see what the error is. I comment and it works:

The line that affects the operation is as follows:
transform: rotate($rot * 1deg) translate($circle-size / 2) rotate($rot * -1deg);

Hey there! Do you have an example project to look at? It’s kind of hard to follow along with one

I could solve it, the wind the ion-tab that caused me this.