bug(mat-form-field): Label for outline mat-form-field is overlapping matPrefix icon in a mat-sidenav

[lcecil]

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

I noticed that the transform property on the <label> for a mat-form-field with appearance="outline" isn't correctly picking up the width of the icon, if the form field has a matPrefix. This is specific to when the form field is within a mat-sidenav (perhaps other components that aren't visible on component init, but I haven't tried).

See attached images of the DOM elements and place in the code where this is calculated, plus attached blitz which shows the correct behavior for a mat-form-field with appearance="fill"

Reproduction

StackBlitz link: https://stackblitz.com/edit/i6aa9z Steps to reproduce:

1. Add a mat-form-field with a matPrefix and appearance="outline" to a mat-sidenav
2. Toggle the mat-sidenav open

Expected Behavior

Label should be shifted to the left so that it does not overlap the icon

Actual Behavior

Label is overlapping the prefix icon

Environment

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