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 usu

Answer 1

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.