Change The Color Of Angular Material mat-radio-button ,I am using Angular 11 Version & Angular Material 11.0.4 Version <mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group>

Change The Color Of Angular Material mat-radio-button ,I am using Angular 11 Version & Angular Material 11.0.4 Version <mat-radio-group aria-label="Select an option"> <mat-radio-button [color]="primary" value="1" >Without Template</mat-radio-button> </mat-radio-group>

• javascript
• html
• css
• angular
• angular-material

• please explain little bit more what u want to to ? Refer this stackoverflow./help/how-to-ask link to improve your question for better understanding – YogendraR Commented Jan 20, 2021 at 5:23

5 Answers 5

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>

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

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 remended 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.

From the docs:

Default Color Configuration The default color for radio buttons can be configured globally using the MAT_RADIO_DEFAULT_OPTIONS provider

providers: [{ provide: MAT_RADIO_DEFAULT_OPTIONS, useValue: { color: 'accent' }, }]

So to get the primary color from your theme add this to your NgModule decorator:

providers: [{
    provide: MAT_RADIO_DEFAULT_OPTIONS,
    useValue: { color: 'primary' },
}]