Angular 6 and Material design form: element name and icon

Question

I am trying to edit a form in Angular 6 + Material Design. In the above code, I have two problems.

First, if I try to change the default formControlName to test I see the following error. Why? How can I fix it?

Second, I would change the fa-envelope icon and I have searched in the Material Design folder, according to the tutorial I found. But no icon info or link was there; how are icons in material design managed? How can I change it?

<form (ngSubmit)="login()" [formGroup]="registrationForm">
    <div class="mt-4">
    <mat-icon matPrefix fontSet="fa" fontIcon="fa-envelope" class="fa-24px text-center mr-3"></mat-icon>
    <mat-form-field class="w-100">
       <input type="email" formControlName="test" matInput placeholder="Deine Name" required="required">
    </mat-form-field>
(...)

Edit

I already have had the instruction

import {MatIconModule} from '@angular/material/icon';

according to the tutorial https://material.angular.io/components/icon/api#MatIcon; and now, where I can find the icon name list and in which syntax should I write? For example, I tried "face" both in middle of my icon tag and in the "fontIcon" parameter but it doesn't work.

Answer 1

1. Using default material icons

<mat-icon>envelope</mat-icon>

2. Using SVG icons

<mat-icon svgIcon="envelope"></mat-icon>

3. Using font set (like FontAwesome)

<mat-icon fontSet="fa" fontIcon="envelope"></mat-icon>

More here Icon | Angular Material

Edit

Icons list available here Icons - Material Design

You should really read more about Material Design and using icons with Angular Material .