更改角度材料中眼睛图标的大小

Question

我正在处理 angular material 中奇怪的 CSS 样式：

正如您在此处看到的，眼睛图标波纹正在从输入中消失，我正在尝试修复它，所以知道如何解决吗？

PS：我尝试了以下方法：

mat-form-field
  > .mat-form-field-wrapper
  > .mat-form-field-flex
  > .mat-form-field-outline {
  display: flex;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

我有以下代码：

 <mat-form-field appearance="outline" floatLabel="always">
    <input
      matInput
      [type]="hide ? 'text' : type"
    />

但是没有任何效果，所以基本上我想在单击眼睛图标时减小阴影的大小，但是没有运气，有什么帮助吗？

Answer 1

我使用 scale() 函数来更改 html 中图标的大小，如下所示，这是一个有效的 stackblitz

<mat-form-field class="example-form-field">
  <mat-label>Clearable input</mat-label>
  <input matInput type="text" [(ngModel)]="value">
  <button mat-button *ngIf="value" matSuffix mat-icon-button aria-label="Clear" (click)="value=''">
    <mat-icon class="transformation">close</mat-icon>
  </button>
</mat-form-field>

和css：

.transformation {
  transform: scale(50%); // 50% for half its size
}