Remove drop arrow of mat-select

Viewed 7069

There is a way to remove the arrow of mat-select?

I need to remove it to center my option with the label : select with arrow

2 Answers

just add

.mat-select-arrow {
    border: none;
   
}

to the component style's sheet or the styles.scss of your angular app. Caution this will remove every arrow in mat-select. if you want to remove arrow for a few ones just add a class to mat-form-field and nest your class in the scss file.
You can find an example here stackblitz

for me the solution was:

::ng-deep mat-select::after {
    display: none;
}
Related