How to change IconButton color?

Question

How can I change the color of icon in IconButton? The color of icon in the theme (using theme designer) is black however sometimes I need to show a iconbutton in white color. The code below doesn't seem to change the color of icon to white

const iconStyle = {
    root: {
        color: theme.palette.white
    }
};

return (
    <div>
        <div className={css(styles.close)}>
            <IconButton iconProps={{ iconName: 'Close' }} styles={iconStyle} title="Close" ariaLabel="Close" />
        </div>

        <h4>{title}</h4>
        <p>{narrative}</p>
        {link}
    </div>
);

score 5 · Accepted Answer · answered Jun 21 '19 at 17:31

Here is a codepen demo: https://codepen.io/vitalius1/pen/BgWmYZ

      <IconButton
        iconProps={{ iconName: 'Emoji2' }}
        styles={{
          icon: {color: 'white', fontSize: 72},
          root: {
            width: 100,
            height: 100,
            backgroundColor: 'black',
            selectors: {
              ':hover .ms-Button-icon': {
                color: 'red'
              },
              ':active .ms-Button-icon': {
                color: 'yellow'
              }
            }
          },
          rootHovered: {backgroundColor: 'black'},
          rootPressed: {backgroundColor: 'black'}
        }}
      />

score 0 · Answer 2 · answered Oct 09 '20 at 19:47

Similar to Vitalie's answer you can do this to avoid using rootHovered: https://codepen.io/Jlovett1/pen/vYKEQQd

<IconButton
        iconProps={{ iconName: 'Emoji2' }}
        styles={{
          icon: {color: 'white', fontSize: 72},
          root: {
            width: 100,
            height: 100,
            backgroundColor: 'black',
            margin: 0,
            padding: 0,
            selectors: {
              '& .ms-Button-icon:hover, .ms-Button-flexContainer:hover': {
                backgroundColor: 'black',
                color: 'red'
              },
            }
          },
        }}
      />

How to change IconButton color?

2 Answers2