Question 171791 in CSS Question posted in
Some basic documentation can be found here.

Does Material Icons support Hover CSS functionality?

I’m trying to add the hover effect to material icons but it does not work. I’m not sure what’s going wrong. Everything else looks great but I’m unable to see the hover effect. I’ve added my code below.

import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
import NotificationsIcon from '@mui/icons-material/Notifications';
import HelpIcon from '@mui/icons-material/Help';

const iconStyle =
{
    "fontSize": "25px",
    "color": "grey",
    "padding-right":"30px",
    "padding-top":"20px",
    "cursor":"pointer",
    "borderRadius": "10%",
    "&:hover": { "color": "black" }
}
<HelpIcon style={iconStyle}/>
                <NotificationsIcon style={iconStyle}/>
                <ManageAccountsIcon style={iconStyle}/>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    I found the solution. This code works when you use the sx keyword instead of style. So this works

    import ManageAccountsIcon from '@mui/icons-material/ManageAccounts';
import NotificationsIcon from '@mui/icons-material/Notifications';
import HelpIcon from '@mui/icons-material/Help';

const iconStyle =
{
    "fontSize": "25px",
    "color": "grey",
    "padding-right":"30px",
    "padding-top":"20px",
    "cursor":"pointer",
    "borderRadius": "10%",
    "&:hover": { "color": "black" }
}
<HelpIcon sx={iconStyle}/>
<NotificationsIcon sx={iconStyle}/>
<ManageAccountsIcon sx={iconStyle}/>

  2. 0

    You can’t use pseudoselectors (&:hover) in inline styles. This is not a limitation of React or Material UI but CSS itself.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search