Angular Material密码输入框显示双眼睛图标，如何仅显示一个？

在迁移至Angular 15的过程中，遇到密码输入框首次输入内容时显示两个眼睛图标的问题——一个是自定义的Material图标，另一个是浏览器自带的密码切换按钮。

相关代码 #

HTML模板：

<mat-form-field appearance="fill">
  <mat-label>Password</mat-label>
  <input matInput [type]="showPassword ? 'text' : 'password'" name="password">
  <mat-icon matSuffix (click)="togglePasswordVisibility()">
    {{showPassword?'visibility_off':'visibility'}}
  </mat-icon>
</mat-form-field>

TypeScript组件代码：

...
public showPassword: boolean = false;
public togglePasswordVisibility(): void {
  this.showPassword = !this.showPassword;
}
...

解决办法 #

通过添加CSS规则，隐藏IE/Edge浏览器自带的密码显示/清除按钮即可解决：

input[type=password]::-ms-reveal,
input[type=password]::-ms-clear
{
  display: none;
}

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