how to change Angular 6 material radio button outer ripple color

Here is solution to completly style mat-radio button

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
        opacity: 0.5 !important;     /*click effect color change*/
        background-color: blue !important;
  }

  ::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
        background-color: blue!important;   /*inner circle color change*/
  }

  ::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
       border-color:blue!important; /*outer ring color change*/
  }

Hope is helpful.


The only way to customize Angular material is to override the css rules, so the solution will be to override the css ripple rules for radio button:

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
     background-color: rgba(0, 0, 0, .1) !important;
 }