Search code examples
htmlangularangular-materialelectrontooltip

How to remove tooltip from [mat-icon] button in an Electron application?

I need to remove the tooltip from the button.

I'm using Angular/Electron for a desktop application.

I have the following code in the .html file:

<button class="close-button" (click)='closeDialog()'>
  <mat-icon class="svg-mat-icon" svgIcon="menu_cancel"></mat-icon>
</button>

This is the 'X' button in the upper-right corner of the screen. When I hover the mouse over it I get a tooltip "menu_Cancel" above it.

How can I remove that tooltip? The button is self-explanatory, and the user does not need to know the filename used.

Thanks.

Solution

  • I had the same problem. I resolved it doing it in my SCSS :

    mat-icon {
  svg {
    pointer-events: none;
   }
}