Change mat-select-arrow icon

Question

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.

Answer 1

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

Answer 2

I had the same issue, I solved by following this procedure.

1. At first, I hide the mat-arrow by adding below this line of .css into component.css

   ::ng-deep .mat-select-arrow { opacity: 0; }

2. And then, I have added the matIcon after the matselect but inside the MatFormField.

   <mat-icon matSuffix>domain</mat-icon>
   

or. You can add your custom Icon URL image by adding the border-images-source

Thanks