title: Material UI TableSortLabel - show custom IconComponent only on hover
body: <p>I am using custom <code>IconComponent</code> for <code>TableSortLabel</code> (material-ui). I want to show the icon only on hover. Can anyone advice on how this can be done?</p>
  <p>Below is my code</p>
  <pre><code> const DropdownIndicator = (props) =&gt; (
          &lt;div {...props.innerProps} className={classes.dropdown}&gt;
              &lt;ArrowDropUpIcon viewBox= &quot;1 -9 24 24&quot; className={classes.arrowDropUp}/&gt;
              &lt;ArrowDropDownIcon viewBox=&quot;1 9 24 24&quot; className={classes.arrowDropDown}/&gt;
          &lt;/div&gt;
      );
  </code></pre>
  <pre><code>&lt;TableSortLabel
    active={orderBy === propertyName}
    direction={orderBy === propertyName ? sortDirection : &quot;asc&quot;}
    onClick={() =&gt; onSort(propertyName)}
    hideSortIcon={orderBy === propertyName}
    IconComponent={DropdownIndicator}
  &gt;{text}&lt;/TableSortLabel&gt;
  </code></pre>
  <p>I want the <code>IconComponent</code> to be shown only on hover. Unfortunately, <code>hideSortIcon</code> property is not working when it has custom <code>IconComponent</code></p>