bug(Menu): Menu Item Icon is truncated if the text is too long

[marek-aguita]

Description

After introduction of MDC components to Angular Material from version 16, the Menu Items do not longer have ellipsis when their text is too long. Instead, a too long text is wrapped as explained here:

https://v16.material.angular.io/guide/mdc-migration#menu

However, what happens now is that in case the text is long enough to be wrapped and Menu Item contains also an Icon, the Icon is truncated:

What could help is to add flex: 1 style to .mat-mdc-menu-item-text.

Reproduction

StackBlitz link: https://stackblitz.com/edit/ykmlxx?file=src%2Fexample%2Fmenu-icons-example.html
Steps to reproduce:

1. open the menu
2. observe the truncated icon in the third Menu Item

Expected Behavior

The Icon is not truncated.

Actual Behavior

The Icon is truncated.

Environment

• Angular: 17.1.1
• CDK/Material: 17.1.1
• Browser(s): all
• Operating System (e.g. Windows, macOS, Ubuntu): all

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