Remove the underline effect from mat-form-field input

I have an input using Angular Material 14 and I get an underline by default when I click on the input. How can I remove this underline?

  <div class="filter-search">
     <mat-form-field appearance="legacy" class="filter-search-item">
        <input type="search" matInput />
      </mat-form-field>
      <mat-icon matPrefix class="my-icon">search</mat-icon>
  </div>

I have tried to use appearance="none" but it gives error Type '"none"' is not assignable to type 'MatFormFieldAppearance'.

Also using css I have used ::ng-deep but it doesn't work either. And looking in the browser's inspector this way it should work, since it is how it appears, but it doesn't work either.

.filter-search-item .mat-form-field-appearance-legacy .mat-form-field-underline {
  height: 0px !important;
  display: none !important;
}

Problem

This is expected because the only two possible appearance styles for the type MatFormFieldAppearance are fill and outline.

If you write the following code:

<mat-form-field appearance="none">
  <mat-label>Input</mat-label>
  <input matInput />
</mat-form-field>

You'll get the following error:

error TS2322: Type '"none"' is not assignable to type 'MatFormFieldAppearance'.

Why do you get this error? If you look at tsconfig.json, you'll see that strictTemplates is set to true by default.

/* To learn more about this file see: https://angular.io/config/tsconfig. */
{
  "compileOnSave": false,
  "compilerOptions": {
    "baseUrl": "./",
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "downlevelIteration": true,
    "experimentalDecorators": true,
    "moduleResolution": "node",
    "importHelpers": true,
    "target": "es2017",
    "module": "es2020",
    "lib": ["es2020", "dom"],
    "noUnusedParameters": false,
    "noUnusedLocals": false,
    "strictNullChecks": true,
    "noImplicitReturns": true,
    "strictFunctionTypes": true,
    "noImplicitOverride": true,
    "noFallthroughCasesInSwitch": true,
    "noImplicitAny": true,
    "noImplicitThis": true,
    "strictBindCallApply": true,
    "esModuleInterop": true
  },
  "angularCompilerOptions": {
    "enableI18nLegacyMessageIdFormat": false,
    "strictInjectionParameters": true,
    "strictInputAccessModifiers": true,
    "strictTemplates": true /* <-- This causes the error */
  }
}

Solution

Add the following CSS to your component CSS:

form-field-overview-example.css

::ng-deep .mat-form-field-underline {
  display: none;
}

See the live demo.

Note: The code above will affect all mat-form-field elements inside this component. If you want to target only specific mat-form-field elements inside this component, you need to add a custom class.

form-field-overview-example.html

<mat-form-field appearance="fill" class="custom-class">
  <mat-label>Input</mat-label>
  <input matInput />
</mat-form-field>

form-field-overview-example.css

::ng-deep .custom-class .mat-form-field-underline {
  display: none;
}