title: How to make a circle checkbox with MUI?
body: <p>The design I have been given to try to match requires a checkbox to be a circle. I'm using MUI with React.</p>
  <p>Border radius does not work because the border of the actual icon is not the border of the visible checkbox.</p>
  <p>I can't just use something like Font Awesome, because it needs to actually be checked and unchecked.</p>
  <pre><code>// Current Styling
  const styles = theme =&gt; ({
    nested: {
      paddingLeft: theme.spacing.unit * 4,
    },
    icon: {
      margin: theme.spacing.unit,
      fontSize: 25,
    },
    root: {
      color: cyan['A400'],
      '&amp;$checked': {
        color: cyan['A400'],
      },
    },
    checked: {},
  });
  
  // Actual checkbox code
  return (
    // Holds the individual step with edit icon and delete icon
    &lt;&gt;
      &lt;ListItemIcon&gt;
        {/* Checkbox */}
        &lt;Checkbox
          type=&quot;checkbox&quot;
          defaultChecked={step.completed} 
          onChange={this.onChange}
          value=&quot;true&quot;
          classes={{
            root: classes.root,
            checked: classes.checked,
          }}
        /&gt;
      &lt;/ListItemIcon&gt;
  </code></pre>
  <p>I want to keep the working code of MUI <code>Checkbox</code> but just change some styling to make the edges a perfect circle (like a radio button but with a checkmark in the middle.</p>