Search code examples
angularangular-material

Remove drop arrow of mat-select

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

Solution

  • 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