How is it possible to change the height of an angular material chip ?
<mat-chip-list>
<mat-chip>Example</mat-chip>
</mat-chip-list>
How is it possible to change the height of an angular material chip ?
<mat-chip-list>
<mat-chip>Example</mat-chip>
</mat-chip-list>
The mat-chip will have min-height: 32px and height: 1px as default.
With longer text/paragraph under mat-chip you will receive the default min-height: 32px only.
So you can control the height by setting it to auto as follows,
In your CSS,
.mat-standard-chip {
height: auto !important;
}
If you want to use for the specific chip with class name/ ID, you make use of same height property with some pixels. Example:
.small-chip {
height: 20px !important;
}
Simply add a custom class to your chip:
<mat-chip class="custom-chip-size">Chip</mat-chip>
and then just style it in your .css/scss file:
.custom-chip-size {
padding: 0 8px;
min-height: 20px;
font-size: 12px;
}