How to Change Mat Radio Button color in Angular?

By default, the mat radio buttons use the accent color of the material theme you have installed. Which may be pink, bluegrey, green, etc. based on the theme you choose.

But sometimes, you might want to get rid of the default theme colors and use your custom ones. This is quite simple. You can override any predefined style by putting ::ng-deep in front of the selector.

So, to change the mat radio button color, you can simply put an ::ng-deep in front of the .mat-radio-outer-circle & .mat-radio-inner-circle classes and set any custom color you want.

You need to simply put the following code in your component’s CSS file:

:host ::ng-deep .mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle, .mat-radio-outer-circle {
    border-color: blue !important;
    /* Sets outer circle & click effect color */
}

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

This is how your radio buttons will look like after placing the above code in the CSS file:

Change Mat Radio Button Color using Providers Array

An alternative approach could be to use MAT_RADIO_DEFAULT_OPTIONS provider in the providers section of your module.ts file.

However, this approach can use only the predefined colors provided by the material theme you are using.

This is how you can set it in your module.ts file(eg: app.module.ts):

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

In indigo-pink theme, the primary color refers to the ‘indigo’, accent refers to the ‘pink’, and warn refers to the ‘red’ color.