bug(MatChips): matChipRemove too restrictive

[btxtiger]

Is this a regression?

• Yes, this behavior used to work in the previous version

The previous version in which this bug was not present was

No response

Description

matChipRemove is a directive that can be used on a button in order to delete a chip from a chip grid.

However the icon must follow the exact selector path button > mat-icon > svg.

It is impossible to use a custom component as icon

<!-- Does not work -->
<button matChipRemove>
   <my-reusable-delete-icon />
</button>

<!-- Does not work -->
<button matChipRemove>
   <mat-icon>
      <my-reusable-delete-svg />
   </mat-icon>
</button>

<!-- Works -->
<button matChipRemove>
   <mat-icon>clear</mat-icon>
</button>


<!-- Works -->
<button matChipRemove>
     <mat-icon>
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
           <path
              d="M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z" />
        </svg>
     </mat-icon>
</button>

Reproduction

StackBlitz link:
https://stackblitz.com/edit/a1vrgk?file=src%2Fexample%2Fchips-autocomplete-example.html

Steps to reproduce:

1. Open file: chips-autocomplete-example.html
2. Working and not working options commented

Expected Behavior

Any custom icon component should be rendered correctly

Actual Behavior

Any custom component is invisible. Only the codepath button > mat-icon > svg gets rendered.

Environment

• Angular: 17.1.0
• CDK/Material: 17.1.0
• Browser(s): Chrome 120
• Operating System (e.g. Windows, macOS, Ubuntu): macOS

[btxtiger]

@topdev658 The issue was about using a regular custom Angular component inside the matChipRemove button label, not adding custom svgs.
Larger scaled applications have sets of components to handle reusable code across the whole app. A delete button should always have the same appearance in every application. This button is the only place in Angular Material where this custom icon component can't be used, and using an svg is not enough since it can't handle any configuration options.

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}