How to change color of radio button in angular material 2

mat-radio-button color change
mat-radio-button checked
mat-radio-group formcontrolname
mat-radio-button checked dynamically
mat-radio-group required validation
angular material radio button example
mat-radio-button change event
angular material table with radio-button

I'm struggling with the next problem. I'm trying to change the color of the angular material 2 radio button on PROPER way, without overriding css. By default, it uses accent color of the material theme, but I want to use the primary.

Other components have color property like checkbox, button, etc...

Thanks in advance.

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  We can create material radio button in angular 6, angular 7, angular 8 and angular 9. I will give you two simple example with angular: 1) Basic Material Radio Button . 2) Material Radio Button with Reactive Form. You can see bellow layout for demo: Create New App

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);

Angular Material - change color of md-radio-button, You can use this rule for the color of the center of your radio button : .mat-radio-​button.mat-accent .mat-radio-inner-circle { background-color:  AngularJs Change Button Color: There are many ways to change button color in angularjs. Here in this tutorial we are going to explain some of them. You can use our online editor to edit and try the code.

Here is what worked for me

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle , .mat-radio-outer-circle {
  border-color: blue !important;

.mat-radio-button.mat-accent .mat-radio-inner-circle{
  background-color: blue !important;

Radio button, Option 2. All radio-buttons with the same name comprise a set from which only one may be The label can be positioned before or after the radio-button by setting the The default color for radio buttons can be configured globally using the  In this Angular 9 radio button example, we will use the Angular Material library to construct UI/UX. Angular Materials offer a lot of built-in modules for your project. Features such as autocomplete, datepicker, slider, menus, grids, and toolbar are available for use with materials in Angular 9.

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

Angular Material Radio Button, Theme color for all of the radio buttons in the group. Change events are only emitted when the value changes due to user interaction with a radio button (the  The <mat-radiobutton>, an Angular Directive, is used for <input type="radio"> for enhance material design based styling.. In this chapter, we will showcase the configuration required to draw a radio button control using Angular Material.

mat-radio-group mat-radio-button should support color attribut , To work with Angular Material radio button we need to import MatRadioModule in value="2" color="accent">Mobile</mat-radio-button>  Set Radio Button Selected in Angular 7|8|9. To set the Radio Button selected in Angular, we will pass the radio button’s value in the from control array like given below. It will set selected value of radio button in Angular’s Reactive Forms. registrationForm = this. fb. group ({gender: ['male'] // Pass the name value in form control array

how to change Angular 6 material radio button outer ripple color, Currently it's not possible to set a color to the radio-group component. On the Angular Material Website, the color is change by theme selector. crisbeto added a commit to crisbeto/material2 that referenced this issue on  Radio Buttons Selected State with Angular 8/9 Reactive Forms. To set selected state of radio buttons in Angular 8/9 we need to pass the radio button’s value to the formcontrol array like given below. registrationForm = this. fb. group ({gender: ['male', [Validators. required]]}) Validate Radio Buttons with Reactive Forms

How do I change the color of a checked mdb radio button?, I wanted to change Angular Material Radio button default color. I can only able <mat-radio-button value="2">Option 2</mat-radio-button> </mat-radio-group>. This article explains how to create radio buttons in Angular 2 and use event binding to show or hide textboxes based on a selected radio button. I will be using Visual Studio as IDE and start with the project.