How can I change the mat-select-arrow to another icon, besides the default dropdown?
I've tried various iterations of
.mat-select-arrow {
icon: url('/assets/images/keyboard_arrow_down.png');
content: icon;
}
Chrome developer tool's compute window does not seem to list any property that corresponds to the arrow type.
assume you are using this:
https://material.angular.io/components/select/overview
The Arrow here is made with pure css:
::ng-deep .mat-mdc-select-arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid;
margin: 0 4px;
}
to changes this, override the border values and set a background-image
Edit: add ::ng-deep
; see comment from @Ruben Szekér
Edit 25.07.2023:
change the example code to mat-mdc-select-arrow