Access <svg> or <mask> inside <md-radio>?

[alexmeier-19]

I want to access the svg element inside the Component via CSS to adjust the radio button's "line thickness". How can I do that?

[asyncLiz]

You can use --md-radio-icon-size, but you cannot change the outline thickness independent of the icon size.

[alexmeier-19]

That's exactly my problem. Will there be an option to vary the outline thickness separately? It is possible for checkboxes but not for radio buttons. This way, it's difficult to match them. Can I just vary the code to access them via partial or are there some disadvantages to this way?

[asyncLiz]

It's unlikely. The two concentric circles are considered an icon together, not a separate element like checkbox's icon vs its outline.

A backdoor option is to use Element.shadowRoot to access the internals of the radio to make changes. This is risky since future updates may break your patch (for example, we could swap from <svg> and <mask> to a CSS-styled <div>).

However, if you don't update often or are willing to take the risk of being broken, it's an option!

const radio = document.querySelector('md-radio');
// Change mask radius to make a thinner outline
radio.shadowRoot.querySelector('mask circle').setAttribute('r', '9');