How to change color of angular mat-radio-button when NOT checked

Question

How to change color of mat-radio-button, when NOT checked. I've been looking answer forever and I wonder is it even possible without changing whole theming.

in CSS ::ng-deep .mat-radio-WHAT?

Picture of my problem

Answer 1

In order to change styles in angular materials you should define a global stylesheet declared in the styles array of your angular.json configuration file, and custom all mat styles within.

this is the class you should override in your styles.css in order to change the mat-radio-button circle color:

Not checked radio button:

styles.css:

.mat-radio-outer-circle {
  border-color: red;
}

Checked radio button:

styles.css:

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

Please read Customizing Angular Material component styles article for better explanation.

Answer 2

If you inspect the HTML for a mat-radio-button, you will find all the classes that form the button and that you need to change. For the mat-radio-button, it is actually made with 2 span , one with the class mat-radio-outer-circle and an other with the class mat-radio-inner-circle .

Working example: https://angular-material-components-demo-ag7pog.stackblitz.io