angular / angular/components

bug(mat-menu-item): iconPositionEnd and matButtonIcon is not available for mat-menu-item

Open
#27,006 4 comments 6 reactions 0 assignees View on GitHub
area: material/menu P3 regression
Dominant language
TypeScript
Stars
25k
Forks
6.8k
Avg merge
1d 8h
Merged PRs (30d)
91

Description

### Is this a regression?

- [X] Yes, this behavior used to work in the previous version

### The previous version in which this bug was not present was

14.x

### Description

Since there was a change in mat-menu-item, that all icons are moved to the start, it is not possible anymore to place icons after the label. This breaks our current design (we have icons in front and after the label)

v15: https://github.com/angular/components/blob/15.2.x/src/material/menu/menu-item.html
v14: https://github.com/angular/components/blob/14.2.x/src/material/menu/menu-item.html

The solution would be to also support `iconPositionEnd` for mat-menu-items as it was done for mat-button.
https://github.com/angular/components/blob/15.2.x/src/material/button/button.html#L11

`matButtonIcon` should be supported as well.

_Bonus_: It would probably be even better to _not_ pull the icons automatically to a certain position (like it was before) or to have an additional attribute, so that an icon is not effected by the pulling (e.g. `iconPositionInline` --> `...`). I am not sure, if this is possible with the new mdc and the change happened in the first place, because the new css-class effected the icons. Nevertheless, iconPositionEnd should be possible.

Thank you!
~Manuel

### Reproduction

```

settings
Settings
open_in_new

```

### Expected Behavior

It should be possible to have buttons at the start and at the end (or inline).

### Actual Behavior

Both/all icons are in the start.

### Environment

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

Contributor guide

Open the contributing guide

Research direction

Compare src/material/menu/menu-item.html in the v15.2.x and v14.2.x references, then inspect the related src/material/button/button.html example for iconPositionEnd and matButtonIcon. Use the provided mat-menu-item reproduction with icons before and after the label; done means the end icon can remain at the end while the start icon remains at the start.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.