How do I change the dropdown‐arrow size in Angular Material mat-select?

I’m using Angular Material 19 and I have managed to override the arrow color via the select-overrides mixin:

Angular Material - Select - Styling

 @include mat.select-overrides((
    enabled-arrow-color: #0047a6
 ));

That changes the caret color. However, I can’t seem to find any token to adjust it's size.

Looking at the styling tab there does not seem to be a token to customize this.

Disclaimer:

"Angular strongly discourages, and does not directly support, overriding component CSS outside the theming APIs described above. Component DOM structure and CSS classes are considered private implementation details that may change at any time." It means that if you update the version of material your styles will break. But so it's important to take that into account.

reference

So it is important to note that the styles could break after material version update. In general angular material documentation discourages this approach.

So you are going to have to customize this using custom CSS. On inspecting the code, I could find a CSS property --mat-select-arrow-transform to add customizations to the SVG, so we use scale to increase the size by 1.5 which provides a larger arrow.

Add this to your global-styles.scss:

.custom-select .mat-mdc-select-arrow-wrapper {
  --mat-select-arrow-transform: translateY(-8px) scale(1.5);
}

Then add the class to the selects you want to customize.

<mat-form-field>
  <mat-label>Toppings</mat-label>
  <mat-select class="custom-select" [formControl]="toppings" multiple>
    ...

Stackblitz Demo