title: Is there a way I can overwrite the colour the Material UI Icons npm package provides in React?
body: <p>I am new to React and am using the npm package Material UI icons (<a href="https://www.npmjs.com/package/@material-ui/icons" rel="noreferrer">https://www.npmjs.com/package/@material-ui/icons</a>) and displaying icons within a React component as such:</p>
  
  <p>Importing: </p>
  
  <pre><code>import KeyboardArrowRightIcon from 'material-ui/svg-icons/hardware/keyboard-arrow-right';
  </code></pre>
  
  <p>and rendering:</p>
  
  <pre><code>readMoreLink={&lt;a href={someUrl} &gt;Read more &lt;KeyboardArrowRightIcon /&gt;&lt;/a&gt;}
  </code></pre>
  
  <p>However, since <code>KeyboardArrowRightIcon</code> is an SVG provided by the npm package, it comes with it's own fill colour:</p>
  
  <p>Eg: <code>&lt;svg viewBox="0 0 24 24" style="display: inline-block; color: rgba(0, 0, 0, 0.54);...</code></p>
  
  <p>I know I can override this colour by having a style attribute within the element, eg:</p>
  
  <pre><code>&lt;KeyboardArrowRightIcon style={{ fill: '#0072ea' }} /&gt;
  </code></pre>
  
  <p>But is there anyway to make this a SCSS variable (<code>style={{ fill: $link-color }}</code>)?</p>
  
  <p>I worry if the link colour changes in the style sheet someone will have to hunt down all these hard coded instances later.</p>