title: Align avatar center in Material UI Chip
body: <p>I want this icon to show up in the middle of the <a href="https://material-ui.com/components/chips/" rel="nofollow noreferrer">Material UI chip</a>, nice and centered.  Right now there's a weird whitespace next to it:</p>
  <p><a href="https://i.stack.imgur.com/Tcrhd.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tcrhd.jpg" alt="enter image description here" /></a></p>
  <pre class="lang-js prettyprint-override"><code>&lt;Chip
    avatar={&lt;LinkAvatarImage socialTypeId={link.socialTypeId} /&gt;}
    size=&quot;small&quot;
    variant=&quot;outlined&quot; 
  /&gt;
  </code></pre>
  <pre><code>export function LinkAvatarImage({ socialTypeId } : { socialTypeId: number }) {
    if (socialTypeId === socialTypes.PERSONAL_WEBSITE) {
      return &lt;WebIcon /&gt;;
    }
  ...
  
  </code></pre>
  <p>I don't know how to tweak Material UI's Chip to do so.</p>
  <p>I tried this but no luck:</p>
  <pre><code>export const useStyles = makeStyles((theme: Theme) =&gt;
    createStyles({
      chip: {
        alignItems: 'center',
        justifyContent: 'center',
      }
    }),
  );
  </code></pre>
  <pre class="lang-js prettyprint-override"><code>
  const classes = useStyles();
  
  &lt;Chip
    avatar={&lt;LinkAvatarImage socialTypeId={link.socialTypeId} /&gt;}
    size=&quot;small&quot;
    classes={classes.chip}
    variant=&quot;outlined&quot; 
  /&gt;
  </code></pre>
  <p>but I also don't see a way to inject a custom style via the props on Chip.  There doesn't seem to be a property to let me do that in the first place.  I <em>think</em> there's a classes prop but I don't understand how to set that in this case.</p>