title: React.js not rendering correct font awesome icon
body: <p>I am facing issue in react.js with font-awesome icon. Here I would like to render different icons using conditional operator. I am able to see the value of span tag rendering correctly but not the font awesome icon. </p>
  
  <p>I am able to see icons are rendered as svg here. But I am not sure what is causing this issue. </p>
  
  <p>Any help is appreciated.</p>
  
  <p>icon links solid: <a href="https://fontawesome.com/icons/star?style=solid" rel="nofollow noreferrer">https://fontawesome.com/icons/star?style=solid</a> </p>
  
  <p>icon links regular: <a href="https://fontawesome.com/icons/star?style=regular" rel="nofollow noreferrer">https://fontawesome.com/icons/star?style=regular</a></p>
  
  <p>jsFiddle: <a href="https://jsfiddle.net/69z2wepo/182809/" rel="nofollow noreferrer">https://jsfiddle.net/69z2wepo/182809/</a></p>
  
  <pre><code>class Hello extends React.Component {
    constructor(props){
      super(props);
      this.state = {
         toggle: true
      }
    }
    toggle(){
      this.setState({toggle: !this.state.toggle});
    }
    render() {
      return (
      &lt;div&gt;
        Hello {this.props.name}
        {
          this.state.toggle ? (
          &lt;span&gt;&lt;i className="fas fa-star"&gt;&lt;/i&gt;solid&lt;/span&gt;
          ) : (
          &lt;span&gt;&lt;i className="far fa-star default-preference"&gt;&lt;/i&gt;regular&lt;/span&gt;
          )
        }
        &lt;div&gt;
          &lt;button onClick={this.toggle.bind(this)}&gt; Toggle &lt;/button&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      )
    }
  }
  
  ReactDOM.render(
    &lt;Hello name="World" /&gt;,
    document.getElementById('container')
  );
  </code></pre>