How shall I adjust the size of mat-form-field mat-chip?

Question

This is the output of my html code

I want to make the size of mat-chip form field even as the above form-field.

This is location from where I used chips..I want to decrease the size of the chip mat-form.

Answer 1

You can override the styles from angular/material.

In this case, it is enough to simply add the same property in a style rule in your component's CSS file. Your component CSS has higher specificity than the mat-chip rules below.

The height of the chip is determined by the following rule:

.mat-standard-chip {
   min-height: 32px;
}

So you could override this to make the chip smaller.

You may also want to modify the font-size with the following rule:

.mat-chip {
   font-size: 14px;
}