How to disable mat-icon-button hover background-color?

Question

Is it possible to disable the default state of hover on a mat-icon-button? I want to apply a custom hover effect on this button, but can't get rid of the default effect as it's still visibly there

<button mat-icon-button>
    <mat-icon>minimize</mat-icon>
</button>

Tried couple of methods by setting the background-color on transparent on hover state, adding the !important tag, but nothing seemed to work.

.mat-icon:hover {
  background-color: transparent;

.mat-mdc-icon-button:hover {
  background-color: transparent;

Answer 1

You have to override mat-mdc-button-persistent-ripple::before this.

.mat-mdc-icon-button:hover .mat-mdc-button-persistent-ripple::before {
  opacity: 1;
  background-color: red;
}

Example :

https://stackblitz.com/edit/4splr1?file=src%2Fexample%2Fbutton-overview-example.css