Description
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
14.x
Description
[Regression between legacy implementation and new MDC implementation]
In the legacy implementation, icons placed inside mat-options were correctly vertically aligned by default. In the new MDC implementation this is no longer the case.
Unlike the MDC menu item icons, mat-option icons will be rendered inside the list item text region, so they do not get aligned by the flexbox. This means that adding the matListItemIcon directive doesn't help either.
As an aside, it is unclear to me whether the list item directives should be supported inside mat-option. If not, will we have to wait for option-specific analogs for each of these directives to become available?
Reproduction
Correct vertical alignment with legacy implementation:
https://stackblitz.com/edit/angular-vcdh27-b2futv?file=src/app/select-overview-example.ts
Incorrect vertical alignment with MDC implementation:
https://stackblitz.com/edit/angular-vcdh27?file=src/app/select-overview-example.ts
Expected Behavior
Either
- the alignment behavior should be unchanged, or
- the change in behavior should be documented in the changelog
Actual Behavior
The aligment is different and this is not mentioned in the changelog or migration guide
Environment
- Angular: 15.0.0
- CDK/Material: 15.0.0
- Browser(s): Chrome
- Operating System (e.g. Windows, macOS, Ubuntu): Windows