title: Put Clear Icon Card Material-UI in React
body: <p>How do I put the clear icon on the card on the top right side of the card overlapping it.
  What is the proper way to do it?</p>
  <p><a href="https://i.stack.imgur.com/QbkXg.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QbkXg.png" alt="So" /></a></p>
  <p>CLICK HERE = <a href="https://codesandbox.io/s/simplepaper-material-demo-forked-jbgee?file=/demo.js" rel="nofollow noreferrer">CODESANDBOX</a></p>
  <pre><code>&lt;Paper
    sx={{
      padding: &quot;1em&quot;,
      background: &quot;black&quot;
    }}
  &gt;
    &lt;IconButton color=&quot;error&quot; aria-label=&quot;add to shopping cart&quot;&gt;
      &lt;ClearIcon /&gt;
    &lt;/IconButton&gt;
    &lt;Grid
      component=&quot;div&quot;
      container
      spacing={2}
      sx={{
        marginBottom: &quot;1em&quot;
      }}
    &gt;
      &lt;Grid component=&quot;div&quot; item sm={12}&gt;
        &lt;Alert&gt;SUCCESS&lt;/Alert&gt;
      &lt;/Grid&gt;
    &lt;/Grid&gt;
  &lt;/Paper&gt;;
  </code></pre>