Is there a way I can overwrite the colour the Material UI Icons npm package provides in React?

Question

I am new to React and am using the npm package Material UI icons (https://www.npmjs.com/package/@material-ui/icons) and displaying icons within a React component as such:

Importing:

import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right'; 

and rendering:

readMoreLink={<a href={someUrl} >Read more <KeyboardArrowRightIcon /></a>} 

However, since KeyboardArrowRightIcon is an SVG provided by the npm package, it comes with it's own fill colour:

Eg: <svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.54);...

I know I can override this colour by having a style attribute within the element, eg:

<KeyboardArrowRightIcon style={{ fill: '#0072ea' }} /> 

But is there anyway to make this a SCSS variable (style={{ fill: $link-color }})?

I worry if the link colour changes in the style sheet someone will have to hunt down all these hard coded instances later.

Answer 1

Change Icon Color

<HomeIcon /> <HomeIcon color="primary" /> <HomeIcon color="secondary" /> <HomeIcon color="action" /> <HomeIcon color="disabled" /> <HomeIcon style={{ color: green[500] }} /> <HomeIcon style={{ color: 'red' }} /> 

Change Icon Size

<HomeIcon fontSize="small" /> <HomeIcon /> <HomeIcon fontSize="large" /> <HomeIcon style={{ fontSize: 40 }} /> 

MDI using Icon component

<Icon>add_circle</Icon> <Icon color="primary">add_circle</Icon> <Icon color="secondary">add_circle</Icon> <Icon style={{ color: green[500] }}>add_circle</Icon> <Icon fontSize="small">add_circle</Icon> <Icon style={{ fontSize: 30 }}>add_circle</Icon> 

For the Font

<Icon className="fa fa-plus-circle" /> <Icon className="fa fa-plus-circle" color="primary" /> <Icon className="fa fa-plus-circle" color="secondary" /> <Icon className="fa fa-plus-circle" style={{ color: green[500] }} /> <Icon className="fa fa-plus-circle" fontSize="small" /> <Icon className="fa fa-plus-circle" style={{ fontSize: 30 }} /> 

Resouces to learn more abo it, Icons