Answer: Change mat-select-arrow icon

answer re: Change mat-select-arrow icon

Jul 20 '18

29

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…

Open Full Answer