如何在角材料的<mat-select>中更改图标？

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);
}