angular

Change mat-select-arrow icon

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-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