[mdc-tab] Button inside tab label is not clickable

[jiayuandeng]

A button inside tab label is not clickable, no matter the tab is disabled or not.

For example, a tab group like this:

<mat-tab-group>
  <mat-tab *ngFor="let tab of tabs; let index = index" [label]="tab">
    Contents for {{tab}} tab
  </mat-tab>
  <mat-tab disabled>
    <ng-template mat-tab-label>
      <button mat-icon-button (click)="addTab()">
        <mat-icon>add_circle</mat-icon>
      </button>
    </ng-template>
  </mat-tab>
</mat-tab-group>

The icon button is visible, but clicking the button never triggers addTab().

It works in non-mdc mat-tab: https://stackblitz.com/edit/angular-1iudkz?file=src%2Fapp%2Ftab-group-dynamic-example.html

[afif-bouzid]

try adding this to your style.css file

.mdc-tab__content{ pointer-events: all!important; }