How do I change the arrow color in mat select without ng-deep or global styles - Angular...

My requirement is simple, I want to change the arrow inside mat-select to a different color.

Below are the solutions known, but I do not want to implement.

1. Using ::ng-deep to customize the arrow.
2. Using global-styles.scss to define a class to customize the arrow.

The problem with the two approaches is that, during material upgrade I have to rework the customizations as mentioned in the docs.

Direct Styles Overrrides

Below is the code I have tried. The solution is using ::ng-deep which I do not want.

SCSS:


:host ::ng-deep {
mat-select .mat-mdc-select-arrow {
color: red !important;
}
}

HTML:


<h4>Basic mat-select</h4>
<mat-form-field>
<mat-label>Favorite food</mat-label>
<mat-select>
@for (food of foods; track food) {
<mat-option [value]="food.value">{{food.viewValue}}</mat-option>
}
</mat-select>
</mat-form-field>

Stackblitz Demo

Continue reading...