Despite following the instructions in this post Attempting to incorporate a linear gradient into a MaterialUI icon, as per a comment's recommendation, I am unable to get it to work.
I experimented with the idea that the icons could be considered text and tried various methods of applying gradients to text, such as those outlined here: https://css-tricks.com/snippets/css/gradient-text/.
However, my attempts have been unsuccessful. The gradient either displays as a box image in front of the icon or doesn't show up at all. Is there anyone who knows how to add a gradient to Material UI icons?
EDIT: I forgot to include my code; here is the relevant snippet:
const useStyles = makeStyles((theme) => ({
root: {
display: 'flex',
},
appBar: {
zIndex: theme.zIndex.drawer + 1,
},
drawer: {
width: drawerWidth,
flexShrink: 0
},
// More styling properties...
}));
const SideBar = (props) => {
const classes = useStyles();
return (
<MuiThemeProvider theme={muiTheme}>
<Drawer
className={classes.drawer}
variant="permanent"
classes={{
paper: classes.drawerPaper,
}}
>
// More component structure...
</Drawer>
</MuiThemeProvider>
)
}
This is the specific list item (which consists of a Material icon) that I'm attempting to apply a gradient to:
<ListItemIcon>
<SearchIcon className{classes.sideBarButton}/>
</ListItemIcon>
Here is the style being applied:
sideBarButton: {
background: "linear-gradient(to right, #ad5389, #3c1053)",
fontSize: "50px"
}
Among the other methods I've tested based on the links provided above:
// Attempted putting the style directly in the tag, but encountered errors
<SearchIcon className={classes.sideBarButton} style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}}/>
Another approach:
sideBarButton:{
background: "-webkit-linear-gradient(#eee, #333)",
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
fontSize: "50px"
}
Yet another technique from :
sideBarButton:{
/* Create the gradient. */
backgroundImage: "linear-gradient(45deg, #f3ec78, #af4261)",
/* Set the background size and repeat properties. */
backgroundSize: "100%",
backgroundRepeat: "repeat",
/* Use the text as a mask for the background. */
/* This will show the gradient as a text color rather than element bg. */
WebkitBackgroundClip: "text",
WebkitTextFillColor: "transparent",
MozBackgroundClip: "text",
MozTextFillColor: "transparent",
fontSize: "50px"
}
P.S. I am currently in the process of learning React and might be overlooking something obvious. Please inform me if you require additional information.