bug(mat-form-field): mat-form-field appearance outline with mat-icon as matPrefix inside a mat-tab

[mcarriere]

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

13

Description

If we have a <mat-form-field appearance="outline"> containing a <mat-icon matPrefix> inside a <mat-tab> that is not displayed initially, the label isn't positioned correctly.

Reproduction

Steps to reproduce:

https://stackblitz.com/edit/angular-ivy-svduwe?file=src%2Fapp%2Fapp.component.html,angular.json,src%2Fstyles.scss,src%2Fapp%2Fapp.module.ts,src%2Findex.html

<mat-tab-group>
  <mat-tab label="First">
    <p>
      <mat-form-field appearance="outline">
        <mat-icon matPrefix>search</mat-icon>
        <mat-label>Outline form field</mat-label>
        <input matInput placeholder="Placeholder" />
      </mat-form-field>
    </p>
  </mat-tab>
  <mat-tab label="Second">
    <p>
      <mat-form-field appearance="outline">
        <mat-icon matPrefix>search</mat-icon>
        <mat-label>Outline form field</mat-label>
        <input matInput placeholder="Placeholder" />
      </mat-form-field>
    </p>
  </mat-tab>
</mat-tab-group>

Expected Behavior

The text should be aligned correctly after the icon

Actual Behavior

Environment

• Angular: 15.0.4
• CDK/Material: 15.0.3
• Browser(s): Chrome/Firefox
• Operating System (e.g. Windows, macOS, Ubuntu): Windows. MacOS

[mcarriere]

The only difference I could spot was with the

transform: var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (52px + var(--mat-mdc-form-field-label-offset-x, 0px))))) !important;

vs

transform: var(--mat-mdc-form-field-label-transform, translateY(-50%) translateX(calc(1 * (0px + var(--mat-mdc-form-field-label-offset-x, 0px))))) !important;

On the .mdc-floating-label

[GuilhermeRabelo]

any updates?