override the mat-chip-remove positioning styles

Question

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> 

Answer 1

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