Mat Radio Button Color Change in Angular

i searched lot of things ,but finally i got the solution

import { ThemePalette } from '@angular/material/core';     
color: ThemePalette = "warn";
     <mat-radio-button [color]="color" value="2">With Template</mat-radio-button>

I guess you are talking about the color of the radio buttons once they are selected.

Generally <mat-radio-group> will be the outer group which holds the <mat-radio-button>

You can change the color in 2 ways.

1. Like how you tried but add the [color] attribute to the <mat-radio-group> . It will take color from your theme (either pre-defined or custom-defined)

2. Override the CSS in the styles.scss file globally (This method is not recommended for color change, but can use for other changes like radius of the circle etc.,) i) To override the CSS simply add the following code

      // For outer circle
     .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
        border-color: blue;
      }
   
      // For inner circle
      .mat-radio-checked .mat-radio-inner-circle {
          background-color: blue;
      }
   

One of the 2 changes should work!

You can add as following in to your CSS file :

::ng-deep .mat-radio-checked .mat-radio-outer-circle {
     border-color: blue;
}

::ng-deep .mat-radio-checked .mat-radio-inner-circle {
     background-color: blue;
}

Please mark answer useful if it works for you.

To also change the ring color in "unchecked" state:

 ::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  opacity: 0 !important;     /*click effect color change*/
  background-color: rgb(255, 255, 255) !important;
}
::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: rgb(255, 255, 255)!important;   /*inner circle color change*/
}
::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
 border-color:rgb(255, 255, 255)!important; /*outer ring color change*/
}
::ng-deep.mat-radio-outer-circle {
  border-color:rgb(255, 255, 255)!important; /*outer ring color change*/
 }