'How to change arrow in mat-form-field svg icon

How to changed thisenter image description here to this in enter image description here

<mat-form-field>
    <mat-label></mat-label>
        <mat-select>
            <mat-option>
            </mat-option>
        </mat-select>
        <mat-error>
            <app-error-drop-down></app-error-drop-down>
        </mat-error>
     </mat-form-field>

I already changed the color it's easy but how to changed the arrow.

.mat-form-field-label {
    color: blue;
}

I have some svg in my assets but don't know how to switch it :/

SOLUTION

Ok, the solution is to opacity: 0 on arrow style like this:

.mat-select-arrow-wrapper{
    opacity: 0;
}

And after that add this in the

<mat-form-field>
    <mat-label></mat-label>
        <mat-select>
            <mat-option>
            </mat-option>
        </mat-select>
        <mat-error>
            <app-error-drop-down></app-error-drop-down>
        </mat-error>
      <mat-icon matSuffix>keyboard_arrow_down</mat-icon>
     </mat-form-field>

like this, i found it in documentation: https://material.angular.io/components/form-field/overview



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source