title: Adding a linear gradient to Material UI icon
body: <p>I've tried the process described in this question <a href="https://stackoverflow.com/questions/65051364/trying-to-add-linear-gradient-to-a-martialui-icon">Trying to add linear gradient to a martialUI icon</a> as a comment stated it should work, but it does not for me.</p>
  <p>Thinking that maybe the icons counted as text, I've tried several of the ways to add gradients to text such as here: <a href="https://css-tricks.com/snippets/css/gradient-text/" rel="nofollow noreferrer">https://css-tricks.com/snippets/css/gradient-text/</a>.</p>
  <p>Yet I haven't gotten anything to work. The gradient either shows as a box image in the foreground, in front of the icon, or just not at all. Does anyone know how to add a gradient to Material UI icons?</p>
  <p>EDIT: Forgot to post my code, here's the relevant snippet:</p>
  <pre><code>const useStyles = makeStyles((theme) =&gt; ({
  root: {
    display: 'flex',
  },
  appBar: {
    zIndex: theme.zIndex.drawer + 1,
  },
  drawer: {
    width: drawerWidth,
    flexShrink: 0
  },
  drawerPaper: {
    width: drawerWidth,
    backgroundColor:muiTheme.palette.secondary.main
  },
  drawerContainer: {
    overflow: 'auto',
    background:muiTheme.palette.secondary.main
  },
  content: {
    flexGrow: 1,
    padding: theme.spacing(3),
  },
  sideBarButton: {
      fill: &quot;#FFFFFF&quot;,
      fontSize: &quot;50px&quot;
  }
    }));
  
  
  
  const SideBar = (props) =&gt; {
      const classes = useStyles();
      return (
          &lt;MuiThemeProvider theme={muiTheme}&gt;
              &lt;Drawer
                  className={classes.drawer}
                  variant=&quot;permanent&quot;
                  classes={{
                  paper: classes.drawerPaper,
                  }}
              &gt;
              &lt;Toolbar /&gt;
              &lt;div className={classes.drawerContainer}&gt;
                  &lt;Box display=&quot;flex&quot; flexDirection=&quot;column&quot; padding=&quot;0&quot; margin=&quot;0&quot;   &gt;
                  &lt;List&gt;
                      &lt;ListItem button&gt;
                          &lt;ListItemIcon&gt; &lt;SearchIcon className={classes.sideBarButton}/&gt; &lt;/ListItemIcon&gt;
                          &lt;ListItemText/&gt;
                      &lt;/ListItem&gt;
                      &lt;ListItem button&gt;
                          &lt;ListItemIcon&gt; &lt;AddCircleIcon className={classes.sideBarButton}/&gt; &lt;/ListItemIcon&gt;
                          &lt;ListItemText/&gt;
                      &lt;/ListItem&gt;
                  &lt;/List&gt;
                  &lt;/Box&gt;
              &lt;/div&gt;
              &lt;/Drawer&gt;
          &lt;/MuiThemeProvider&gt;
      )
  }
  </code></pre>
  <p>More precisely, this is the list item (which is a material icon) I'm trying to add gradient to:</p>
  <pre><code>&lt;ListItemIcon&gt; 
      &lt;SearchIcon className{classes.sideBarButton}/&gt; 
  &lt;/ListItemIcon&gt;
  </code></pre>
  <p>And this is the style applied:</p>
  <pre><code>sideBarButton: {
      background: &quot;linear-gradient(to right, #ad5389, #3c1053)&quot;,
      fontSize: &quot;50px&quot;
  }
  </code></pre>
  <p>The other methods I've tried per the links above:</p>
  <pre><code>// Just put the style in the tag, doesn't compile
  &lt;SearchIcon className={classes.sideBarButton} style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}}/&gt;
  </code></pre>
  <p>Another method:</p>
  <pre><code>    sideBarButton:{
       background: &quot;-webkit-linear-gradient(#eee, #333)&quot;,
       WebkitBackgroundClip: &quot;text&quot;,
       WebkitTextFillColor: &quot;transparent&quot;,
       fontSize: &quot;50px&quot;
      }
  </code></pre>
  <p>Yet another method via <a href="https://fossheim.io/writing/posts/css-text-gradient/" rel="nofollow noreferrer">https://fossheim.io/writing/posts/css-text-gradient/</a> :</p>
  <pre><code> sideBarButton:{
          /* Create the gradient. */
       backgroundImage: &quot;linear-gradient(45deg, #f3ec78, #af4261)&quot;,
  
      /* Set the background size and repeat properties. */
      backgroundSize: &quot;100%&quot;,
      backgroundRepeat: &quot;repeat&quot;,
  
      /* Use the text as a mask for the background. */
      /* This will show the gradient as a text color rather than element bg. */
      WebkitBackgroundClip: &quot;text&quot;,
      WebkitTextFillColor: &quot;transparent&quot;,
      MozBackgroundClip: &quot;text&quot;,
      MozTextFillColor: &quot;transparent&quot;,
      fontSize: &quot;50px&quot;
      }
  </code></pre>
  <p>P.S. I'm just now learning React, I may very well be missing something simple. Please let me know if you need more info.</p>