Changing CSS from Angular Material Checkbox

Question

can someone tell me, how I can change the colour of the round circle when you click the angular material checkbox. Shown in the following image (the pink circle)

Here is the link from the official webpage: https://material.angular.io/components/checkbox/overview

Thanks for the Help

Answer 1

The checkbox (both the checkmark and the ripple), by default uses the accent color from your theme. You can change it to use the primary color by using the color = "primary" property on the element. If you want to use a custom color (i.e. not from the theme), you'd have to override the CSS manually or create a custom theme.

If you only want to override the color of the ripple, you can override the .mat-ripple-element class which is added on the generated ripple element whenever you click the checkbox. Add your desired styles to theme.scss.

.custom-ripple {
  .mat-ripple-element {
    background-color: rgba(100, 200, 50, 0.5) !important;
  }
}

Here's an example.