Mat-form-field label not floating after upgrading to Angular Material 16

Question

I've recently upgraded a project to Angular 16 from Angular 15. So far the logics are working fine however there are some issues faced with the mat-form-field where the label is not floating. The same code is working fine in v12. Angular automatically set the dependencies to use legacy but still the component is breaking.

angular.json

{
    "projects": {
        "architect": {
            "build": {
                "options": {
                    "styles": [
                        "@angular/material/prebuilt-themes/indigo-pink.css",
                        "bootstrap/dist/css/bootstrap.min.css",
                        "src/styles.scss",
                        "src/assets/css/other_styles.scss"
                    ]
                }
            }
        }
    }
}

Below is the material dependencies I've imported -

import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';

HTML code for the component:

<div class="loginform-block login-bg">
  <div class="center-element loginform card">
    <div class="loginform-header">SOME CONTENT
    </div>
    <div class="loginform-content">
      <form [formGroup]="loginForm" (submit)="onSubmit()">
        <div class="mb-3">
          <mat-form-field appearance="legacy" class="w-100">
            <mat-label>Username</mat-label>
            <input autocomplete="off" matInput placeholder="Enter Username" id="username" formControlName="username"
              autoCapitalize maxlength="10" />
            <mat-error>Username Required</mat-error>
          </mat-form-field>
        </div>
        <div class="mb-3">
          <mat-form-field appearance="legacy" class="w-100">
            <mat-label>Password</mat-label>
            <input [type]="passwordHide ? 'password' : 'text'" matInput placeholder="Password" id="password"
              formControlName="password" />
            <mat-icon matSuffix (click)="passwordHide = !passwordHide" class="cursor-pointer">{{
                            passwordHide ? 'visibility_off' :
                            'visibility' }}</mat-icon>
            <mat-error>Password Required</mat-error>
          </mat-form-field>
        </div>
        <div class="loginform-action mb-3">
          <button mat-raised-button color="primary" [disabled]="!loginForm.valid" class="iA-button">Login</button>
        </div>
        <div class="version-info text-center mt-2" *ngIf="version">Version: <strong
            class="current-version">{{version}}</strong></div>
      </form>
    </div>
  </div>
  <div class="clearfix"></div>
</div>

OUTPUT:

Expected result: The label should float & the form field also shrinked a bit after upgrading. It should look like this -

Exampl is here - v12 fields

Answer 1

I've fixed the issue. The issue was actually with the material CSS file imported in angular.json .

If we want to use old styles we need to use this line - ./node_modules/@angular/material/legacy-prebuilt-themes/legacy-indigo-pink.css

NOTE: This can be used till v16 only