css - Angular 垃圾桶图标将鼠标指针更改为光标

Question

我有一个带 Angular 3列表。列是域禁用操作和操作是垃圾箱图标按钮。

我的问题是，当鼠标指针移到垃圾桶图标按钮上时，鼠标指针变成了像文本框一样的光标。我如何使它成为图标上的指针？

我的工作表代码在这里:

  <mat-table #table [dataSource]="tableData">

    <ng-container cdkColumnDef="domain">
      <mat-header-cell *cdkHeaderCellDef fxFlex="50%">Domain</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="50%">{{config.domain}}</mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="disable">
      <mat-header-cell *cdkHeaderCellDef fxFlex="30%">Disabled</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="30%">{{config.disabled}}</mat-cell>
    </ng-container>

    <ng-container cdkColumnDef="button">
      <mat-header-cell *cdkHeaderCellDef fxFlex="15%">Action</mat-header-cell>
      <mat-cell *cdkCellDef="let config" fxFlex="15%">
        <mat-icon (click)="deleteDomain(config)">delete_forever</mat-icon>
      </mat-cell>
    </ng-container>

    <mat-header-row *cdkHeaderRowDef="displayedColumns"></mat-header-row>
    <mat-row *cdkRowDef="let config; columns: displayedColumns;"></mat-row>

  </mat-table>

Answer 1

在CSS中，可以使用 cursor: pointer 更改光标在给定元素上。将该规则应用于mat-icon元素，它应覆盖默认的文本光标。