bug(mat-form-field): Form field with icon prefix or suffix makes long label overflow

[domestack]

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

When using mat-form-field together with prefix or suffix and long label, label is overflowing input box. Seems that text-overflow: ellipse doesn't account for suffix neither prefix width.

`

info_outline Very very very very very long label

Very very very very long label

`

Reproduction

Steps to reproduce:

1. Create mat-form-field with matIconSuffix or matIconPrefix.
2. Create mat-label with long text.
3. If label text is wider than input box, then label is overflowing it.

Expected Behavior

Label should not overflow input box.

Actual Behavior

Environment

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

[henrikcomes]

Here is a Stackblitz with the Issue. https://stackblitz.com/edit/angular-tq1tvp?file=src%2Fapp%2Fselect-overview-example.html

[Mesya82]

Just a bump because encountering the same issue

[pmpak]

We also spotted the same issue. We are currently using:

Angular: 17.3.5 CDK/Material: 17.3.5

[alexmacavei]

Seems like the label inside the mat-mdc-form-field-infix has a longer width than it's parent. Setting it to 100% does the trick, but I'm not sure if that's MD intent or it's really a bug. It also looks weird on our project when we have, for ex, 2 suffix buttons in the form input field.