Styling mat-radio-button in Angular Material

Question

I have just started using the Angular Material theme within my Angular app.

I make use of some radio buttons but want to style them so that they are smaller than usual. I can style the text labels but I am struggling to style the actual buttons themselves (the circles).

So for now, I have

<mat-radio-group class="smallRadio">
    <mat-radio-button value="1">Option 1</mat-radio-button>
    <mat-radio-button value="2">Option 2</mat-radio-button>
</mat-radio-group>

How should I go about that?

Answer 1

Try this,

Default radius is 20px we are setting it to 10px here

    :host ::ng-deep .mat-radio-container{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-outer-circle{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-inner-circle{
      height: 10px;
      width: 10px;
    }
    :host ::ng-deep .mat-radio-button .mat-radio-ripple{
      height: 20px; /*double of your required circle radius*/
      width: 20px;  /*double of your required circle radius*/
      left: calc(50% - 10px); /*'10px'-same as your required circle radius*/
      top: calc(50% - 10px); /*'10px'-same as your required circle radius*/
    }

Without using ::ng-deep

Turn off encapsulation of your component inside which you use the custom radio.

You can do this by

import {Component,ViewEncapsulation} from '@angular/core';
@Component({
  selector: 'example',
  templateUrl: 'example.component.html',
  styleUrls: ['example.component.css'],
  encapsulation : ViewEncapsulation.None,
})
export class ExampleComponent {}

Wrap the component you want to style in a custom class.So it wont affect any other radio components. In the above question its already wrapped with smallRadio class

.smallRadio .mat-radio-container{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-outer-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-inner-circle{
    height: 10px;
    width: 10px;
}
.smallRadio .mat-radio-button .mat-radio-ripple{
    height: 20px; 
    width: 20px; 
    left: calc(50% - 10px); 
    top: calc(50% - 10px); 
}

You can add these css in global stylesheet without turning off view encapsulation. But more elegant method is the above one