CODEWITHSUNDEEP
reactjsmaterial-uiicons
Alex Reuka
Alex Reuka

Reputation: 91

How I can apply white color for Material UI Icon?

I need to white Pencil icon, I do:

  <CreateIcon style={{ color: white[500] }} />

But "white" not exist in Material UI https://material-ui.com/customization/color/#official-color-tool

How I can used white color?

Upvotes: 2

Views: 5771

Answers (3)

NearHuscarl
NearHuscarl

Reputation: 81833

As you may already know, white only has one color (#fff). If you want to have different 'shade' of white, you can use grey if that's what you mean.

import grey from '@material-ui/core/colors/grey';

const useStyles = makeStyles((theme) => ({
  white: {
    color: grey[50],
  },
}

render() {
  const classes = useStyles();
  ...
  return <CreateIcon className={classes.white}/>;
}

Upvotes: 1

Kal
Kal

Reputation: 1774

The easiest couple of ways are:

1)

<CreateIcon style={{ color: '#fff' }} />

or

2)

const useStyles = makeStyles((theme) => ({
  white: {
    color: theme.palette.common.white,
  },
}

In your component:

const classes = useStyles();
..
<CreateIcon className={classes.white}/>

Upvotes: 2

hgb123
hgb123

Reputation: 14901

You could override style

const WhiteCreateIcon = withStyles({
  root: {
    color: "white"
  }
})(CreateIcon);

Codesandbox demo

Edit gallant-feynman-wiirn

Upvotes: 1

Related Questions