how to i replace the dropdown arrow on the material select dropdown - css

Question

Currently material select form field uses an arrow down which I believe it is done via css.
I would like to replace it with a different type of arrow, and I would like advice on what would be the best way to achieve this.
Here's what I am hoping to switch the original one for:
the original one is a solid triangle as seen in https://material.angular.io/components/select/overview
Thank you for any advice!

Answer 1

You have to understand something: The solid triangle for the mat-select, is not an image, its just pure CSS (or SCSS in this case).
Its just like how you create triangles and circles using CSS. Same procedure.
If you want to change the style, color etc, you can do it in the following way:
:host {
::ng-deep
mat-select.mat-select
> div.mat-select-trigger
> div.mat-select-arrow-wrapper
> div.mat-select-arrow {
color: red !important;
}
}
Here i changed the 'color' property. But you can play around with shapes of triangles too.
Here is the stackblitz: https://stackblitz.com/edit/angular-xkkagv?file=src%2Fapp%2Fselect-overview-example.scss
If you want it without ::ng-deep, you can use ViewEncapuslation.None in your component.ts file and play around too, which, in hindsight, may not be a good solution at the moment.