Icon in Angular Material Input field not showing

Question

I'm trying to display an icon within an Angular Material Input field, but unfortunately the icon is not displayed. I used the following code:

https://stackblitz.com/edit/stackblitz-starters-ngdhyg?file=src%2Fmain.ts

Even though I added the mat-icon component with the matSuffix attribute, the icon is not displayed. Can someone please help me and tell me what I'm doing wrong or if I've missed something?

Thanks in advance for your assistance!

<form (ngSubmit)="onSubmit()" class="contact-form">
      <mat-form-field>
        <mat-label>Email</mat-label>
        <input matInput type="email" formControlName="email" placeholder="Ex. pat@example.com">
        <mat-icon color="primary" matSuffix>email</mat-icon>
      </mat-form-field>
  
       <button mat-raised-button color="primary" type="submit"> Save
       </button>
</form>

Answer 1

Please find below example where it works fine, we need to add the imports I guess

also ensure you have added the imports for fonts in index.html

<link rel="preconnect" href="https://fonts.gstatic.com">
  <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

component ts

import { Component } from '@angular/core';
import { MatIconModule } from '@angular/material/icon';
import { MatInputModule } from '@angular/material/input';
import { MatButtonModule } from '@angular/material/button';
import { MatFormFieldModule } from '@angular/material/form-field';

/** @title Simple form field */
@Component({
  selector: 'form-field-overview-example',
  templateUrl: 'form-field-overview-example.html',
  styleUrl: 'form-field-overview-example.css',
  standalone: true,
  imports: [MatIconModule, MatFormFieldModule, MatButtonModule, MatInputModule],
})
export class FormFieldOverviewExample {
  onSubmit() {}
}

component html

<form (ngSubmit)="onSubmit()" class="contact-form">
  <mat-form-field>
    <mat-label>Email</mat-label>
    <input
      matInput
      type="email"
      formControlName="email"
      placeholder="Ex. pat@example.com"
    />
    <mat-icon color="primary" matSuffix>email</mat-icon>
  </mat-form-field>

  <button mat-raised-button color="primary" type="submit">Save</button>
</form>

Stackblitz Demo