Angular trash icon is changing mouse pointer to a cursor

Question

I have a 3 column table with angular. columns are domain-disable-actions and actions is a trash can icon button .

My problem is when mouse pointer comes onto the trash icon button, mouse pointer is becoming a cursor like a text box. How can i make it pointer on the icon ?

My working table code is here:

  <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

You can use cursor: pointer CSS class, but i think you should use icon button in this case, simply like this:

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

This will give you the pointer cursor with gray background color on select which means better user experience and less css classes.