4

I have a scenario in which i have to use a specific material icon as cursor pointer for a mat-button. I don't have any idea how to achieve this. Any help will be appreciated.

 <button mat-button>
 <button>
dockerrrr
  • 277
  • 1
  • 5
  • 17

2 Answers2

3

There is no way to do it using Material. You need to update the CSS by adding:

you-mat-element {
   cursor: pointer;
}

I forked the original Angular example and I made the change to have a live Demo: https://stackblitz.com/edit/angular-eynqmo

Ala Eddine JEBALI
  • 7,033
  • 6
  • 46
  • 65
  • I am quite late to this, but according to https://stackoverflow.com/questions/45962081/css-cursor-pointer-with-svg-image it might be possible. If you have a look at their repository (e.g. https://github.com/google/material-design-icons/tree/master/src/action/3d_rotation/materialicons), it's a SVG file. So one would *just* have to get the SVG data, encode it properly and set as URL source via CSS I believe. It does involve some work though. – Igor Oct 11 '20 at 23:20
1

In the css file add the following line into your css class:

.your-css-class { cursor: URL('path-to-png-or-svg-file'), auto; }

Note that the png or SVG file can be downloaded from the google material icon page at the following link: Google Material Icons

Ramin Ar
  • 1,213
  • 13
  • 10