title: Restyling hover on Material UI IconButton - the matter of "ellipse" or "shadow"
body: <p>I know there were few similar questions, but my request is slightly different.
  I have already definded focus color of &quot;ellipse&quot; or &quot;shadow&quot; and icon itself that appears around IconButton (containing HighLightOffIcon):</p>
  <pre><code>const iconColor ='#F70000';
  const MyDelete = withStyles({
    root: {
      color: iconColor,
      cursor: 'pointer',
    },
  })(HighlightOffIcon);
  </code></pre>
  <p>And that is OK - the shadow takes &quot;diluted&quot; appearance and desired color.
  Wanted, however, have the same picture on hover, and believed the code will do the job is:</p>
  <pre><code>const iconColor ='#F70000';
  const MyDelete = withStyles({
    root: {
      color: iconColor,
      cursor: 'pointer',
      '&amp;:hover': {
        background: &quot;iconColor&quot;,
     },
     
    },
  })(HighlightOffIcon);
  </code></pre>
  <p>But it doesn't work - the on-hover-shadow is still dark and not reddish. What is wrong with this code?</p>