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

Answer 2

Please do not use ViewEncapsulation.None in your project. In future it will lead to unpredictable behavior. When you change styles inside one component some other components can be changed as well and it will be difficult to find which ones.

If you want to override styles of angular material I suggest creating a separate *.scss in your project with the name like "material-overrides.scss" where you will put all style changes for different components. For example, your file can look like this

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

Please pay attention to !important in my example. It's also not a good practice. You need to replace it with more precise specifity MDN web docs.

Please also do not forget to add your created material-overrides.scss file to styles.scss like that:

@import './material-overrides.scss';

You can also read recommendations for overrides from angular material team - link.

Answer 3

I think, this should be enough:

.mat-radio-container {
    transform: scale(0.85);
}

Choose the number in the scale according to your needs.