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*/ }