mat-list-item shows matListIcon to the right when using ngSwitch

[Alan502]

Bug

What is the expected behavior?

Mat-list-item should always show matListIcon to the left

What is the current behavior?

When using ngSwitch, matListIcon is moved to the right

What are the steps to reproduce?

Take a look at:

https://stackblitz.com/edit/angular-material2-issue-jbu3mk?file=index.html

Check_circle icon should be to the right

What is the use-case or motivation for changing an existing behavior?

This was working fine in previous angular material versions.

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

I'm using Angular Material 2.0.0-beta.12

Is there anything else we should know?

[crisbeto]

The issue seems to come from the fact that when you wrap the icon in an ng-container, it ends up moving the icon to the end of its parent which breaks some CSS selectors that expect it to be first.

[heunetik]

Any updates? This is still an issue with Angular 8.2.12, and also with Angular 9.1.7

[SvenBudak]

Any Updates?

[amayer42]

@Alan502 I was just running into this as well. @crisbeto is correct that it's because your matListIcon directive is within an ng-container. If you additionally apply, matListIcon to the ng-container in your example, the entire ng-container will end up being rendered within the proper ng-content section of the mat-list-item.

<ng-container matListIcon [ngSwitch]="yesOrNo">