javascript - 如何使图标与 Angular 5/6 中的按钮类似？

Question

我正在编写一个代码来编辑帐户信息中的名称，并且按钮工作正常，但我希望将编辑按钮作为图标(铅笔)。 Icon不支持ngIf，有什么替代方案吗？ ( Angular 5/6)我的代码如下:

<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>

代码输出:

Answer 1

:) 将其添加到答案中以使其计数!只需在按钮标签内放置一个图标，如下所示:

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