angularangular-material

How to change Background Color of mat-chip of Angular Material 18

I dont understand the new Material theming.

How to make the background green?

<mat-chip class="make-green">
  Hello World
</mat-chip>

I read API Docs, with no success.

Theme color of the chip. This API is supported in M2 themes only, it has no effect in M3 themes.

For information on applying color variants in M3, see https://material.angular.io/guide/theming#using-component-color-variants.

Solution

  • It is as simple as this:

    <mat-chip style="--mdc-chip-elevated-container-color: lightgreen;">
  One fish
</mat-chip>