How to disable Ripple + hover effect from a mat-button in Angular Material 15

Question

I'm using Angular 15 with Material 15 and trying to add a button without ripple effect / any hover effect's.

This used to work in angular material 12:

<button mat-button [disableRipple]="true">DoSomething</button>

But now it's still showing ripple / hover effect's. Is the "disableRipple" input broken?

I can remove this behavior by doing:

.no-hover-effect {
  &.mat-mdc-button {
    ::ng-deep {
      .mat-mdc-button-persistent-ripple, .mat-mdc-button-ripple {
        display: none;
      }
    }
  }
}

But I would like a solution without having to modify the css.

Answer 1

It seems to have been fixed in angular 16. See bug report.

Answer 2

Hover can't be disabled this way.

try

:host ::ng-deep {
  .mat-checkbox span.mat-checkbox-ripple {
    display: none;
  }
}

Hover is not intended to be disabled, because accesibility:

https://github.com/angular/components/issues/8298#issuecomment-354753835