Scenario
We want to toggle the visibility of the password field.
Approach
Use the mat-icon and toggle the hide property which will alter the fields type and icon setting correspondingly:
<form [formGroup]="signin"><mat-form-field><input matInput placeholder="Password" [type]="hide ? 'password' : 'text'" formControlName="password" required><mat-icon matSuffix (click)="hide = !hide">{{hide ? 'visibility_off' : 'visibility'}}</mat-icon><mat-hint *ngIf="!passwordInput.value">Enter your password</mat-hint></mat-form-field></form>
