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

正如 Uma 所指出的，您可以将垫子图标放在按钮内。

请看下面的代码示例： https://stackblitz.com/edit/mat-button-icon-example

Answer 2

:) 将其添加到答案中以使其有价值！只需在按钮标签内放置一个图标，如下所示：

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

angular 5/6 中如何使图标类似于按钮？

How to make icon work similar to button in angular 5/6?

javascript

typescript

angular-material2

angular