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.

[therrax]

Is it fixed in latest version?

[AzarielUr]

Hello, still having the issue on version 16.2.7

[userhv]

Persists on Angular 17.0.2

[e-karlsson]

Same problem in 17.1.1. The lazy load seem to be a workaround for now.

[kevindqc]

For me, the problem was that the icon comes from the network and its size is not known until it is loaded.

So when the form field is rendered initially, it doesn't know that my icon is 24x24 since it's not loaded yet. So the code pointed out by @tdahlhoff would find the width of the icon container to be 0.

Then when you come back, things look good, because the image is already loaded and cached, so the size is already known.

My workaround for this was to hardcode the size of my icon in the CSS.

[Arthi93]

Still an issue, using Angular 18 and Material 3, now only available solution seems to be removing the icons

[daitro123]

I have the same issue in v17.3.10, though not in mat-tab but in mat-sidenav. The form is inside a component which is initialized programatically with ViewContainerRef and when the sidenav is closed, therefore outside of viewport, that's when icons overlap. When the sidenav is opened and the component with the form is created, it works fine.