bug(MatFormField): mat-form-field and mat-icon with new @if @else condition

[AlexKorole]

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

No response

Description

mat-icon for mat-form-field shows below mat-form-field component

Code:

 <mat-form-field class="full-width" appearance="fill">
        <mat-label translate>attributes.FILE</mat-label>
        <input
          matInput
          readonly
          [required]="!editMode"
          formControlName="FILE"
          (click)="onImageFileClick()"
          class="input-file"
        />
        @if (isFolder) {
        <mat-icon matSuffix (click)="onClickItem()" style="cursor: pointer">folder</mat-icon>
        } @else {
        <mat-icon matSuffix (click)="onDeleteItem()" style="cursor: pointer">clear</mat-icon>
        }
      </mat-form-field>

Reproduction

StackBlitz link:
Steps to reproduce:

1. Create mat-form-field
2. Add 2 mat-icons with @if @else condition
3. Run application

Expected Behavior

mat-icon should be on the right side of mat-form-field.

Actual Behavior

mat-icon for mat-form-field shows below mat-form-field component.

Environment

• Angular: 17.0.2
• CDK/Material: 17.0.0
• Browser(s): Chrome Version 119.0.6045.160
• Operating System (e.g. Windows, macOS, Ubuntu): Windows

[crisbeto]

Unfortunately this is a limitation with how content projection works in the control flow (see angular/angular#52414). There are a couple of ways to work around it:

1. Have a separate @if around each <mat-icon>.
2. Wrap the @if {} @else {} with <ng-container matPrefix>.

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