如何为mat-form-field内matPrefix/matSuffix位置的mat-icon绑定点击事件？

默认Angular Material会为mat-form-field的前缀、后缀元素设置pointer-events: none属性，避免干扰输入框的默认交互逻辑，因此直接在绑定了matPrefix的mat-icon上添加点击事件会无法触发，可通过以下两种方法实现需求：

方案1：修改CSS开启指针事件（改动最小） #

给自定义图标类添加如下样式，强制允许元素响应鼠标交互：

.formula-icon {
  /* 覆盖默认的pointer-events禁用规则 */
  pointer-events: auto !important;
  /* 可选：添加手型光标提示用户可点击 */
  cursor: pointer;
}

原有模板代码无需调整，绑定的(click)="clicking()"即可正常触发。

方案2：使用官方规范的交互前缀写法（推荐） #

Angular Material官方推荐可交互的前缀/后缀元素包裹在mat-icon-button按钮中，符合Material设计规范，无需额外修改CSS：
修改后的模板代码如下：

<mat-form-field floatLabel="never" >         
  <button 
    mat-icon-button 
    matPrefix 
    (click)="clicking()"
    *ngIf="item[displayedColumn]?.formula != undefined && item[displayedColumn].lock == 'off'"
  >
    <mat-icon class="formula-icon" svgIcon="lo-formula"></mat-icon>
  </button>
  <input [value]="currentFocusValue" autocomplete="off">
</mat-form-field>

异常排查 #

如果调整后事件仍无法触发，可按以下顺序验证：

• 确认组件代码中已正确定义clicking()方法，浏览器控制台无相关报错
• 检查页面元素层级，确认没有其他透明元素覆盖在图标上方拦截点击事件

效果示意图：

内容的提问来源于stack exchange，提问作者MuthuKani K