如何调整mat-icon-button的焦点位置或移除焦点效果

针对你的mat-icon-button自定义样式后焦点环不对齐的问题，提供两种解决方案：

方案1：调整焦点环位置对齐图标 #

由于你给按钮设置了height:21px和bottom:8px的偏移，默认焦点环会跟随按钮容器的位置，导致和图标错位。可以通过自定义CSS修正焦点位置：

1. 给按钮添加自定义类：

<button mat-icon-button class="custom-icon-btn" color="black" style="height: 21px; bottom: 8px;" *ngIf="!transaction.HasMatch" (click)="matchPayable($event, transaction)">
   <mat-icon style="line-height: 20px;">playlist_add</mat-icon>
</button>

2. 在组件CSS文件中添加焦点样式：

.custom-icon-btn:focus.mat-icon-button {
  /* 保持Material风格的圆形焦点环 */
  box-shadow: 0 0 0 4px rgba(0,0,0,0.2);
  /* 下移焦点环，匹配按钮的bottom偏移 */
  transform: translateY(8px);
  /* 移除默认outline避免样式冲突 */
  outline: none;
}

这里的translateY(8px)完全对应你按钮的bottom:8px偏移量，能让焦点环精准对齐图标位置。

方案2：完全移除焦点效果 #

如果不需要焦点提示，直接覆盖默认的焦点样式即可：

同样给按钮加custom-icon-btn类，然后添加CSS：

.custom-icon-btn:focus.mat-icon-button {
  outline: none;
  box-shadow: none;
}

注意：移除焦点效果可能影响无障碍访问（比如键盘导航用户无法感知当前选中元素），建议谨慎使用。

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