css - 如何更改 Angular Material 中 中的图标？

Question

我对 mat-nav-list 中的箭头有疑问，我必须实现以下目标:

• 如果下拉列表，箭头向下，
• 在其他情况下指向右侧。

 <mat-form-field>
    <mat-select placeholder="Select">
      <mat-option value="option">Option</mat-option>
    </mat-select>
  </mat-form-field>

我试过在 css 中隐藏 mat-select-arrow，但这对我不起作用。

Answer 1

使用 transform: rotate(-90deg); 将箭头向右旋转并在焦点上向下旋转。

也可以使用 :host and ::ng-deep

Working example

:host mat-select ::ng-deep .mat-select-arrow{
transform: rotate(-90deg);
}

::ng-deep .mat-form-field.mat-focused.mat-primary .mat-select-arrow{
  transform: rotate(0deg);
}