Angular Material - Changing the density doesn't affect the html element

Question

I want to make my matInput smaller than the default size. The html looks like this:

<mat-form-field class="input-parent" subscriptSizing="dynamic" appearance="outline" style=" margin-right: 10px; font-size: 12px;">
  <input matInput type="text" [(ngModel)]="input" (keydown)="checkForSubmit($event)">
</mat-form-field>

In the scss, I followed this answer, and added the following scss:

.input-parent{
  @include mat.input-density(-2);
}

But, it doesn't affect the size of the input at all. I also tried stuff like

-mat.all-component-densities instead of mat.input-density

moving it out of the class to the main scss file

putting it inside body instead of .input-parent

setting the parent class to the parent of the mat-form-field instead of the direct parent of the mat-input

but nothing works. I also want to add that changing the density of a button worked, but not the density of an input.

Does anyone have a solution? Thanks

Answer 1

As far as I can see, so far this feature is very poorly documented. Here is what I have tested: class definition must be in global style file:

.input-parent {
  @include mat.form-field-density(-5);
}

if you want to set class on component level you gonna have to user ::ng-deep :

::ng-deep .input-parent {
  @include mat.form-field-density(-5);
}

Density ranges not returning error (-5 - 0).

Answer 2

I had a similar problem in Angular 17.1 and the issue was applying the mat.input-density mixin to the mat-form-field element. I changed the style to include mat.form-field-density instead and it worked as expected (no need to add it to the global file or use ::ng-deep)

@use '@angular/material' as mat;
.input-parent {
    @include mat.form-field-density(-2);
}