bug(mat-menu): ng-container inside the mat-menu-item causes bug with vertical alignment with icon

[Londeren]

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

Angular / Material 14

Description

If wrap a content of mat-menu-item in ng-container it breaks vertical alignment for mat-icon and corresponding item text.

<button
  mat-icon-button
  [matMenuTriggerFor]="menu"
  aria-label="Example icon-button with a menu"
>
  <mat-icon>more_vert</mat-icon>
</button>
<mat-menu #menu="matMenu">
  <button mat-menu-item> ← works fine without wrapper
    <mat-icon>dialpad</mat-icon>
    <span>Redial</span>
  </button>
  <button mat-menu-item>
    <ng-container> ← breaks the alignment
      <mat-icon>voicemail</mat-icon>
      <span>Check voice mail</span>
    </ng-container>
  </button>
</mat-menu>

Reproduction

Steps to reproduce:
Please, see the example on stackblitz

1. Wrap mat-menu-item in ng-container like this:

<button mat-menu-item>
    <ng-container>
      <mat-icon>voicemail</mat-icon>
      <span>Check voice mail</span>
    </ng-container>
  </button>

Expected Behavior

Actual Behavior

Broken vertical alignment:

Environment

• Angular: 15.0.0 / 15.1.4
• CDK/Material: 15.1.4
• Browser(s): Any
• Operating System (e.g. Windows, macOS, Ubuntu): Any

[mmalerba]

This is due to limitation of Angular's content projection. The icon and text need to be content projected into different places in the menu item's template - by wrapping them both in the same ng-container, content projection isn't able to separate them. If you wanted to project them in separate ng-containers that would be possible, though you would need to put ngProjectAs="mat-icon" on the icon's ng-container to indicate that it should be projected into the icon slot. Here's an example of that: https://stackblitz.com/edit/angular-nklcdp-qj92f3?file=src%2Fapp%2Fmenu-icons-example.html

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