title: Setting the avatar in Material UI to actual size by styling child elements to full size of parent
body: <h2>General Question</h2>
  
  <p>How is the width and height for the elements inside Material-UI <code>&lt;Avatar/&gt;</code> set?</p>
  
  <h2>Specific example</h2>
  
  <p>Specifically the challenge I am having is that <code>&lt;AccountCircle/&gt;</code> <a href="https://www.materialui.co/icon/account-circle" rel="nofollow noreferrer">example: account circle</a> is not filling up the parent.</p>
  
  <p>I am trying to get an avatar of 80x80 but because material-ui adds so many random classes with random margins and padding, I end up with something else. The actual code generated produces an <code>&lt;svg&gt;</code> with a <code>&lt;path&gt;</code> inside which measures approximately 66.67px</p>
  
  <pre><code>const avatarImageStyle = {
      width: 80,
      height: 80,
  };
  </code></pre>
  
  <h3>JSX</h3>
  
  <pre><code>&lt;AccountCircle style={Object.assign({}, avatarImageStyle, {color: 'grey' })} /&gt;
  </code></pre>