How to make icon work similar to button in angular

问题:

I'm writing a code to edit names in account information and button works fine but i want edit button as an icon (pencil). Icon does not support ngIf, is there any alternative? (Angular 5/6) My code is as follows:

<div>
   <mat-form-field class="example-full-width" *ngIf="edit">
    <input matInput placeholder="Enter name . [(ngModel)]="name">
   </mat-form-field>
   <span *ngIf="!edit">Name : {{name}}</span>
</div>
<div class="example-button-row">
   <button mat-raised-button color="primary" *ngIf="!edit" 
    (click)="onEdit()">Edit</button>
   <button *ngIf="edit" mat-raised-button color="primary" 
    (click)="onEdit()">Submit</button> 
</div>

Code Output:

回答1:

:) adding it to the answer to make it count! Just put an icon inside the button tag like this:

<button
    mat-raised-button
    color="primary"
    (click)="onEdit()">
    <span *ngIf="!edit">Edit</span>
    <span *ngIf="edit" > Put your icon here </span> 
</button>

回答2:

As Uma pointed out, you can just put mat-icon inside the button.

Please see code example below: https://stackblitz.com/edit/mat-button-icon-example