javascript - Adding a linear gradient to Material UI icon

I've tried the process described in this question Trying to add linear gradient to a martialUI icon as a ment stated it should work, but it does not for me.

Thinking that maybe the icons counted as text, I've tried several of the ways to add gradients to text such as here: /.

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?

EDIT: Forgot to post my code, here's the relevant snippet:

const useStyles = makeStyles((theme) => ({
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: "#FFFFFF",
    fontSize: "50px"
}
  }));



const SideBar = (props) => {
    const classes = useStyles();
    return (
        <MuiThemeProvider theme={muiTheme}>
            <Drawer
                className={classes.drawer}
                variant="permanent"
                classes={{
                paper: classes.drawerPaper,
                }}
            >
            <Toolbar />
            <div className={classes.drawerContainer}>
                <Box display="flex" flexDirection="column" padding="0" margin="0"   >
                <List>
                    <ListItem button>
                        <ListItemIcon> <SearchIcon className={classes.sideBarButton}/> </ListItemIcon>
                        <ListItemText/>
                    </ListItem>
                    <ListItem button>
                        <ListItemIcon> <AddCircleIcon className={classes.sideBarButton}/> </ListItemIcon>
                        <ListItemText/>
                    </ListItem>
                </List>
                </Box>
            </div>
            </Drawer>
        </MuiThemeProvider>
    )
}

More precisely, this is the list item (which is a material icon) I'm trying to add gradient to:

<ListItemIcon> 
    <SearchIcon className{classes.sideBarButton}/> 
</ListItemIcon>

And this is the style applied:

sideBarButton: {
    background: "linear-gradient(to right, #ad5389, #3c1053)",
    fontSize: "50px"
}

The other methods I've tried per the links above:

// Just put the style in the tag, doesn't pile
<SearchIcon className={classes.sideBarButton} style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}}/>

Another method:

    sideBarButton:{
     background: "-webkit-linear-gradient(#eee, #333)",
     WebkitBackgroundClip: "text",
     WebkitTextFillColor: "transparent",
     fontSize: "50px"
    }

Yet another method via / :

 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'm just now learning React, I may very well be missing something simple. Please let me know if you need more info.

I've tried the process described in this question Trying to add linear gradient to a martialUI icon as a ment stated it should work, but it does not for me.

Thinking that maybe the icons counted as text, I've tried several of the ways to add gradients to text such as here: https://css-tricks./snippets/css/gradient-text/.

EDIT: Forgot to post my code, here's the relevant snippet:

const useStyles = makeStyles((theme) => ({
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: "#FFFFFF",
    fontSize: "50px"
}
  }));



const SideBar = (props) => {
    const classes = useStyles();
    return (
        <MuiThemeProvider theme={muiTheme}>
            <Drawer
                className={classes.drawer}
                variant="permanent"
                classes={{
                paper: classes.drawerPaper,
                }}
            >
            <Toolbar />
            <div className={classes.drawerContainer}>
                <Box display="flex" flexDirection="column" padding="0" margin="0"   >
                <List>
                    <ListItem button>
                        <ListItemIcon> <SearchIcon className={classes.sideBarButton}/> </ListItemIcon>
                        <ListItemText/>
                    </ListItem>
                    <ListItem button>
                        <ListItemIcon> <AddCircleIcon className={classes.sideBarButton}/> </ListItemIcon>
                        <ListItemText/>
                    </ListItem>
                </List>
                </Box>
            </div>
            </Drawer>
        </MuiThemeProvider>
    )
}

More precisely, this is the list item (which is a material icon) I'm trying to add gradient to:

<ListItemIcon> 
    <SearchIcon className{classes.sideBarButton}/> 
</ListItemIcon>

And this is the style applied:

sideBarButton: {
    background: "linear-gradient(to right, #ad5389, #3c1053)",
    fontSize: "50px"
}

The other methods I've tried per the links above:

// Just put the style in the tag, doesn't pile
<SearchIcon className={classes.sideBarButton} style={{linear-gradient(to right bottom, #FD297B, #FF5864, #FF655B)}}/>

Another method:

    sideBarButton:{
     background: "-webkit-linear-gradient(#eee, #333)",
     WebkitBackgroundClip: "text",
     WebkitTextFillColor: "transparent",
     fontSize: "50px"
    }

Yet another method via https://fossheim.io/writing/posts/css-text-gradient/ :

 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'm just now learning React, I may very well be missing something simple. Please let me know if you need more info.

Share Improve this question edited Dec 14, 2020 at 4:30 asked Dec 14, 2020 at 0:19 Brooklyn Welsh 811 silver badge4 bronze badges

1 Can you please post your code? – MCA Commented Dec 14, 2020 at 0:42
@MCA Ah, sorry about that, just edited with code and more clear info about what I've tried so far. – Brooklyn Welsh Commented Dec 14, 2020 at 4:18
specifically, where do you want to add a gradient in background color or in icon color? – Rajiv Commented Dec 14, 2020 at 4:44
@Rajiv I would like the fill of the Search Icon to be a gradient, the background should be transparent. It's worth mentioning, I've also tried "fill : "linear-gradient(to right, #ad5389, #3c1053)" as well in my code, but this also did not affect the icon any, so I assume it is not valid React code. – Brooklyn Welsh Commented Dec 14, 2020 at 4:50
Also, I know it isn't any thing wrong with the structure of my code elsewhere, because if I do something simple like "fill : "blue" " or "background: "blue" ", then the icon is changed as one would expect. – Brooklyn Welsh Commented Dec 14, 2020 at 4:51

| Show 4 more ments

1 Answer 1

Sorted by: Reset to default 14

Here is an example using Material UI v5.

The fill property of the icon is linked to the linear gradient's id property.

import OpenWithIcon from "@material-ui/icons/OpenWith"

const GradientOpenWithIcon = () => (
  <>
    <svg width={0} height={0}>
      <linearGradient id="linearColors" x1={1} y1={0} x2={1} y2={1}>
        <stop offset={0} stopColor="rgba(241,184,74,1)" />
        <stop offset={1} stopColor="rgba(207,113,8,1)" />
      </linearGradient>
    </svg>
    <OpenWithIcon sx={{ fill: "url(#linearColors)" }} />
  </>
)

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - Adding a linear gradient to Material UI icon - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)