Угловой значок корзины меняет указатель мыши на курсор

Question

У меня есть 3 столбца таблицы с угловой. столбцы domain-disable-actions и actions - кнопка со значком корзины.

Моя проблема в том, что когда указатель мыши попадает на кнопку с изображением корзины, указатель мыши становится курсором, похожим на текстовое поле. Как сделать так, чтобы указатель был на значке?

Код моего рабочего стола здесь:

  <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

Вы можете использовать cursor: pointer CSS класс, но я думаю, что вы должны использовать значок кнопки в этом случае, просто так:

<button mat-icon-button (click)=“doSomeThing()”>
      <mat-icon>delete_forever</mat-icon>
</button>

Это даст вам указатель курсора с серым цветом фона при выборе, что означает лучший пользовательский опыт и меньше классов CSS.

Answer 2

В CSS можно изменить курсор, когда он находится над данным элементом, используя cursor: pointer.Примените это правило к элементу mat-icon, и оно должно переопределить текстовый курсор по умолчанию.