Angular Material: custom more compact form-field without label and hint using density?

In Angular Material, you can create a more compact form field by using the Density directive. This directive allows you to adjust the spacing between elements in a form field, making it more compact.

To use the Density directive, you can apply it to the form field container element. For example:

Copy code<mat-form-field [density]="'compact'">
  <!-- form field content goes here -->
</mat-form-field>

This will create a more compact form field with reduced spacing between elements.

If you don’t want to display the label or hint for the form field, you can simply omit them from the template. For example:

Copy code<mat-form-field [density]="'compact'">
  <mat-icon matPrefix>person</mat-icon>
  <input matInput placeholder="Username">
</mat-form-field>

This will create a compact form field with an icon as a prefix, but no label or hint.