Angular Material v15：无法点击mat-tab标签内的mat-icon

Mat-Tab的标签容器会默认捕获点击事件用于切换标签，导致内部元素的点击事件被冒泡拦截，无法触发自定义逻辑。

解决方法很简单：在Mat-Icon的点击事件中添加$event.stopPropagation()，阻止事件向上冒泡到标签容器，这样就能正常触发你的自定义事件，同时不会影响标签本身的切换逻辑（点击标签文字部分仍可切换）。

修改后的代码示例：

<mat-tab-group>
  <mat-tab label="First"> Content 1 </mat-tab>
  <mat-tab label="Second"> Content 2 </mat-tab>
  <mat-tab label="Third">
    <ng-template mat-tab-label>
      <mat-icon (click)="alertRef(); $event.stopPropagation()" class="example-tab-icon">delete</mat-icon>
      Third
    </ng-template>
  </mat-tab>
</mat-tab-group>

如果希望点击Icon时完全不触发标签切换，上述方法正好适用；如果需要同时触发标签切换和自定义事件，去掉$event.stopPropagation()即可，可根据实际需求调整。

内容的提问来源于stack exchange，提问作者Sandeep Gupta