feat(MENU): Make content-projection for icon possible for any other icon definitions like fa-icon or <i>

[anschm]

Feature Description

Feature Description

Actually the menu item HTML is implemented like this:

<ng-content select="mat-icon"></ng-content>
<span class="mdc-list-item__primary-text"><ng-content></ng-content></span>
<div class="mat-mdc-menu-ripple" matRipple
     [matRippleDisabled]="disableRipple || disabled"
     [matRippleTrigger]="_getHostElement()">
</div>
<svg
  *ngIf="_triggersSubmenu"
  class="mat-mdc-menu-submenu-icon"
  viewBox="0 0 5 10"
  focusable="false"><polygon points="0,0 5,5 0,10"/></svg>

We can see that the mat-icon is projected into the menu item by using the selector mat-icon. This has the limitation to use the menu item only with mat-icon if the menu should have an icon. But whats about fa-icon or ?

It would be great to add a menu item like:

  <button mat-menu-item(click)="click()">
    <fa-icon [icon]="faIcon"></fa-icon>
   <span>...</span>
  </button>

In this case the fa-icon contains a svg like mat-icon can do. It would be cool to project fa-icon into the menu item like mat-icon. This can be done with a directive name like icon or any other name.

Use Case

Use mat-menu-item also with other icon components like or fa-icon.

Use Case

No response

[crisbeto]

Adding all the possible icon selectors to our template wouldn't be feasible, but I've opened #26235 which adds a matMenuItemIcon attribute that you can set on your icons to project them in the correct place.

[anschm]

Thats exactly what I am looking for. Could we get this in 15.0.3?

[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.}