Angular4 Change md-button's ripple color

Question

I have created a md-button in my webpage using Material for Angular4. Is there a way to change the ripple effect's color and make it white? Can I also change other ripple properties, like the duration of the ripple effect?

Answer 1

It turned out that in order to change the ripple properties, one should create a mixin at the mat-ripple-theme and import it in their app's styles.scss file:

@import '~@angular/material/theming';

@mixin mat-ripple-theme($theme) {
  .mat-ripple-element {
    background-color: rgba(255, 255, 255, .4);
  }
}