title: MUI Select - change icon background color when on hover
body: <p>I am currently working to customize MUI <code>Select</code> method, However, I found it is difficult to hover the &quot;NarrowDownIcon&quot;:</p>
  <p><a href="https://i.stack.imgur.com/VEZFP.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VEZFP.png" alt="enter image description here" /></a></p>
  <p>I want to change the <code>backgroundColor</code> of this icon to &quot;blue&quot; when hover it, this is my code:</p>
  <pre><code>icon: {
    color:        theme.palette.primary.dark,
    height:       32,
    width:        32,
    top:          `calc(50% - ${theme.spacing(2.2)}px)`,
    borderRadius: &quot;50%&quot;,
    cursor:       &quot;pointer&quot;,
  
    &quot;&amp;:hover&quot;: {
      backgroundColor: theme.palette.primary.lighter,
    },
  },
  </code></pre>
  <p>then i applied this css to select icon class:</p>
  <pre><code>  &lt;Select
        value={selectedValue}
        onChange={onChange}
        onFocus={onFocus}
        onBlur={onBlur}
        className={classes.textInput}
        inputProps={{
          id,
          name: id,
        }}
        classes={{
          icon: classes.icon,
        }}
  </code></pre>
  <p>but it doesn't work , can anyone help me with this, Thank you</p>