Label for mat-form-field is overlapping with mat-icon in mat-tab.

[simpleplayer]

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

14

Description

Label is overlapping with icon.

• When using in 2nd Tab of Tabgroup, surrounded with a e.g. a div, p, ...
• and
• When using the the mat-form-field with appearance "outline" and an icon with matPrefix.

<div>
            <mat-form-field appearance="outline">
                <mat-label>Outline form field</mat-label>
                <input matInput placeholder="Placeholder">
                <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
                <mat-hint>Hint</mat-hint>
            </mat-form-field>
        </div>

Reproduction

Steps to reproduce:

1. add to app.module
   import { MatInputModule } from '@angular/material/input';
   import { MatFormFieldModule } from '@angular/material/form-field';
   import { MatTabsModule } from '@angular/material/tabs';

2. add to app.component

<mat-tab-group mat-stretch-tabs="false" mat-align-tabs="start">
    <mat-tab label="First">
        <div>
            <mat-form-field appearance="outline">
                <mat-label>Outline form field</mat-label>
                <input matInput placeholder="Placeholder">
                <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
                <mat-hint>Hint</mat-hint>
            </mat-form-field>
        </div>
    </mat-tab>
    <mat-tab label="Second">
        <div>
            <mat-form-field appearance="outline">
                <mat-label>Outline form field</mat-label>
                <input matInput placeholder="Placeholder">
                <mat-icon matPrefix>sentiment_very_satisfied</mat-icon>
                <mat-hint>Hint</mat-hint>
            </mat-form-field>
        </div>
    </mat-tab>
</mat-tab-group>#

for the input field in 2nd tab : label is overlapping with mat-icon
4.
when inspecting the style, it seems the X transform is not correct

Expected Behavior

Label should have correct margin

Actual Behavior

Label is overlapping with mat-icon

Environment

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

[trentprynn]

+1, encountering this issue as well while upgrading to angular@15 (from angular@14), temporary workaround I found is using lazy-loaded tabs makes the form input prefix text render as expected

<mat-tab label="Example Tab">
    <ng-template matTabContent>
        <app-example-tab></app-example-tab>
    </ng-template>
</mat-tab>

[shaylanger]

👍 Still an issue. Encoutered during angular 15 upgrade as well.

the workaround that @trentprynn posted seems to get things to display correctly.
Here is a stackblitz that reporudces the issue: https://stackblitz.com/edit/angular-b6q6sv-tyk3ag?file=src%2Fapp%2Fform-field-appearance-example.html,src%2Fapp%2Fform-field-appearance-example.ts

[thomasErich135]

This problem persisting in Angular Material version: 15.2.2 with Angular 15.2.2

The solution that @trentprynn not working for me.
I use ng-container with ngTemplateOutlet for render my ng-template:

<mat-tab-group>
    <mat-tab label="Controle">
        <ng-container *ngTemplateOutlet="tableControle"></ng-container>
    </mat-tab>
    <mat-tab label="Revisões">
        <ng-container *ngTemplateOutlet="tableRevisao"></ng-container>
    </mat-tab>
</mat-tab-group>

<ng-template matTabContent #tableControle>
    <!--  content -->
</ng-template>

<ng-template matTabContent #tableRevisao>
   <!--  content -->
</ng-template>

[Nevac]

As @thomasErich135 mentioned, the issue persists on Angular 15.2.2

Me and my team encountered the exact same issue described by OP. As @trentprynn suggested, lazy loading works. This workaround is not suitable for some cases in our application.

[JanesH64]

+1

[mte-bad]

+1

[spp125]

I also encountered a problem where the mat icon in a 'mat-form-filed' is overlapping with the 'mat-label', causing a visual issue.

Steps to reproduce

1. Add a 'mat-form-filed' to a card.
2. Place an icon as prefix within the 'mat-form-field'
3. Add a 'mat-label to the 'mat-form-field'.

[marcus-coube]

As @spp125 mentioned, the issue with the prefix icon persists on Angular 16.1.0 (material 16.1.3)....

Does anyone have a solution/workaround to this problem?

[tdahlhoff]

We are facing overlapping labels when using prefix icons in inputs with appearance outline.
This happens even outside of tabs or cards.

This only happens right after loading the page. When going forth and back using the normal angular routing the prefix icons/labels are displayed correct.
I guess its something with
const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;
const textPrefixContainer = this._textPrefixContainer?.nativeElement;
const iconPrefixContainerWidth = iconPrefixContainer?.getBoundingClientRect().width ?? 0;
const textPrefixContainerWidth = textPrefixContainer?.getBoundingClientRect().width ?? 0;
in

components/src/material/form-field/form-field.ts

Line 655 in ccff68c

const iconPrefixContainer = this._iconPrefixContainer?.nativeElement;

Still do not have any solution for it.