Material Design compact: Select / DropDown doesn't react on density

I use Material design in my Angular app.

Some elements like the mat-select have a very high density - these elements are anything but compact.

The common way to render the layouts more compact in Material design is the density-property of the theme.

I tried different ways to the the density - and it applies fine for buttons and other elements. But the mat-select stays big as always.

Using of mat-select:

<mat-form-field appearance="fill">
<mat-label>Granularität</mat-label>
<mat-select [(value)]="this.settings.granularity">
<mat-option value="day">täglich</mat-option>
<mat-option value="week">wöchentlich</mat-option>
</mat-select>
</mat-form-field>


Try 1 (no effect):

@include mat.select-density(-3);


Try 2 (density for complete theme, no change for mat-select):

$my-app-theme: mat.define-light-theme((
color: (primary: $my-app-primary, accent: $my-app-accent, warn: $my-app-warn),
typography: mat.define-typography-config(),
density: -3,
));


mat-select unchanged big:



Continue reading...