Controlling the height of a mat-chip

Viewed 5618

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

3 Answers

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

You can use below properties:

.mat-standard-chip {
   min-height: 22px !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;
}

enter image description here

Related