Change mat-select-arrow icon

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

I had the same problem and I had to set the 'border-image-source' property.

::ng-deep .mat-select-arrow {
    border-left: 15px solid transparent !important;
    border-right: none !important;
    border-top: 15px solid transparent !important;
    border-image-source: url('my img url') !important;
    border-image-repeat: stretch !important;
}

Hope this helps!

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

There are two ways to achieve the custom css for angular material:

Method 1) By disabling viewencapsulation:

import { Component, OnInit, **ViewEncapsulation** } from '@angular/core';
import { MatTabChangeEvent } from '@angular/material/tabs';

@Component({
  selector: 'app-sample-component',
  templateUrl: './sample-component.component.html',
  styleUrls: ['./sample-component.component.css'],
  encapsulation: ViewEncapsulation.None  // *** This line disables the view encapsulation
})

export class SampleComponent implements OnInit {
}

Advantage: You can directly override material class properties in the sample-component.component.css like:

.mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

.mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
.mat-select-arrow {
  border-top: 5px solid rgb(10, 73, 99);
}

Method 2) Traditional way (without disabling encapsulation) (Avoid):

Advantage: No change to be made in component Change in component.component.css like:

::ng-deep .mat-tab-label {
    width: 33.3%;
    height: 55px !important;
}

::ng-deep .mat-ink-bar {
    background-color: #0a4963;
}

/*** To change the arrow color ****/
::ng-deep .mat-select-arrow {
  color: rgb(10, 73, 99);
}

/***    /deep/ too works   ****/
/deep/ .mat-select-arrow {
  color: rgb(10, 73, 99);
}

DISADVANTAGE (A word of caution for Method 2): Angular is planning to drop support for ng-deep. There is this recent conversation on git for the alternatives. Also it is indicated in the official angular site as ::ng-deep is intended only for cushioning during the deprication support.

Use /deep/, >>> and ::ng-deep only with emulated view encapsulation. Emulated is the default and most commonly used view encapsulation. For more information, see the Controlling view encapsulation section.

References:
https://github.com/angular/angular/issues/25160
https://angular.io/guide/component-styles#deprecated-deep--and-ng-deep