How to change color of radio button in angular material 2

In case anyone else stumbles across this issue, you can now use the color property on MatRadioButton components. Here is the link to the GitHub issue where I was corrected:

  • https://github.com/angular/material2/issues/9439

The radio-button component hasn't input for change the color. You need to add the following lines in your .scss file:

/deep/ .mat-radio-outer-circle {
.mat-radio-checked & {
      border-color: #3f51b5;
    }
}

/deep/ .mat-radio-inner-circle {
    background-color: #3f51b5;
}

/deep/ .mat-radio-ripple .mat-ripple-element {
    background-color: rgba(#3f51b5, 0.26);
}

ng-deep is depricated. Copy this code into your styles.scss file. It will work.

.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
opacity: 0 !important; /*click effect color change*/
background-color: #422873 !important;  }

.mat-radio-button.mat-accent .mat-radio-inner-circle {
background-color: #422873 !important; /*inner circle color change*/  }

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