title: Material-UI Radio Button with svg circle
body: <p>Hello guys i'm trying to customize the Material-UI <a href="https://material-ui.com/components/radio-buttons/" rel="nofollow noreferrer">radio button</a> using CSS modules and I haven't been able to have much success, it seems like the easier way to do it would be to use the makeStyles function from Material-UI but I am supposed to be using CSS modules.</p>
  
  <p>So this is this is the standard Material-UI radio button:</p>
  
  <p><a href="https://i.stack.imgur.com/Hh6gu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Hh6gu.png" alt="Radio Button"></a></p>
  
  <p>Basically I have to make this: <a href="https://i.stack.imgur.com/cwSTU.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/cwSTU.png" alt="Radio button design"></a>.</p>
  
  <p>Material-UI doesn't have the check mark available but I am sure that I can do it somehow with SVG but I just cant seem to figure out how to do it. If someone can please help or point me in the right direction I would greatly appreciate it.</p>
  
  <p><strong>UPDATE:</strong> It turns out I could just inject a SVG as a component using the Radio component's checkedIcon property which I found on Material-UI icons, here is the <a href="https://material-ui.com/api/radio/" rel="nofollow noreferrer">documentation</a>. </p>
  
  <p>That only met my needs for the checked 'Active' part that I needed, then I was struggling with the 'Hover' part for while thinking I had to use a SVG for that when all I really needed to do was to draw a circle using ::before or ::after to create a pseudo element and styling it to be a circle withing the main circle, same thing witht the 'Focus' part.</p>