0

On mat-chip documentation i read that:

MatChipRemove

Applies proper (click) support and adds styling for use with the Material Design "cancel" icon available at https://material.io/icons/#ic_cancel.

You may use a custom icon, but you may need to override the mat-chip-remove positioning styles to properly center the icon within the chip.

Selector: [matChipRemove]

But how can i do this? I changed the icon but now i see a different color then the chip when i go hover on the x button. I need to change the default style of the button that is contained in mat-chip in my html component, can i do

<mat-chip *ngFor="let fruit of fruits" (removed)="remove(fruit)">
  {{fruit.name}}
  <button matChipRemove>
    <img src="./assets/icons/close.svg" alt="x" />
  </button>
</mat-chip>
KeyserSoze_AN
  • 9
  • 1

1 Answers1

0

The icon change is only about changing the icon itself. It does not do anything else.

It changes colors because the Material Design spec says so, and since they follow the guidelines, then the button changes colors.

They only tell you to update the positioning style because not all icons are of the same size.

But you can of course change the color of the icon too. Here is how.

In your component style :

    mat-chip {
      &:hover [matChipRemove] {
        color: blue;
        opacity: 1;
      }
      [matChipRemove] {
        &:hover {
          opacity: 1;
          color: red;
        }
      }
    }
MGX
  • 2,534
  • 2
  • 14
  • Of course, update the colors to your liking ! – MGX Sep 22 '22 at 09:45
  • The link is taking me to stackblitz homepage :) Anyway i will try – KeyserSoze_AN Sep 22 '22 at 09:58
  • Sorry, removed it, something must have gone wrong ... But you still have the related CSS at least ! be sure to put this into your component, not into the `style.scss` : otherwise, you will have to add `!important` at the end of every property (because of selector priority) – MGX Sep 22 '22 at 10:02