Issue
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.
Solution
assume you are using this:
https://material.angular.io/components/select/overview
The Arrow here is made with pure css:
::ng-deep .mat-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
Answered By - enno.void
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.