cssangularangular-material

Controlling the height of a mat-chip

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 default implementation sets the min-height to 32 pixels enter image description here

Solution

  • 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;
}