Angular material v15 : Not able to click on icon inside mat tab

I have added a (click) handler on icon inside mat-tab > mat-tab-label

But the problem is its not getting triggered when I click on the mat-icon

Stackblitz

Code:

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="S开发者_如何学Pythonecond"> Content 2 </mat-tab>
  <mat-tab label="Third">
    <ng-template mat-tab-label>
      <mat-icon (click)="alertRef()" class="example-tab-icon">delete</mat-icon>
      Third
    </ng-template>
  </mat-tab>
</mat-tab-group>

Inside each tab of your mat-tab-group, there's an element with class mdc-tab__content by default this element has a pointer-events: none property. You can easily target this element and use pointer-events: all instead.

Something like this:

(In your SCSS file)

:host {
   ::ng-deep {
     .mat-mdc-tab-group .mat-mdc-tab .mdc-tab__content { pointer-events: all; }
   }
}