title: Toggling Font Awesome 5 icon with React
body: <p>I am trying to toggle a Font Awesome icon by clicking on a to-do list item. Here is the entire component...</p>
  
  <pre><code>import React from 'react';
  
  import './TodoItem.scss';
  
  class TodoItem extends React.Component {
    constructor(props) {
      super(props);
      this.state = {
        complete: false
      }
      this.toggleComplete = this.toggleComplete.bind(this);
    }
  
    toggleComplete() {
      this.setState(prevState =&gt; ({
        complete: !prevState.complete
      }));
    }
  
    render() {
      const incompleteIcon = &lt;span className="far fa-circle todo-item-icon"&gt;&lt;/span&gt;;
      const completeIcon = &lt;span className="far fa-check-circle todo-item-icon"&gt;&lt;/span&gt;;
  
      return (
        &lt;div className="todo-item" onClick={this.toggleComplete}&gt;
          {this.state.complete ? completeIcon : incompleteIcon}
          &lt;span className="todo-item-text"&gt;{this.props.item}&lt;/span&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default TodoItem;
  </code></pre>
  
  <p>Here's my FA 5 CDN (straight from the website)...</p>
  
  <pre><code>&lt;script defer src="https://use.fontawesome.com/releases/v5.0.1/js/all.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>I've taken a few screenshots of the React dev tool and inspector...</p>
  
  <p>Here is the React component while incomplete (the default)
  <a href="https://i.stack.imgur.com/Yc84p.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/Yc84p.jpg" alt="React component while incomplete"></a></p>
  
  <p>And while complete...
  <a href="https://i.stack.imgur.com/GcR3a.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/GcR3a.jpg" alt="React component while complete"></a></p>
  
  <p>And the two icon elements in the inspector, I noticed the one not being used by default is commented out.
  <a href="https://i.stack.imgur.com/0u1Am.png" rel="noreferrer"><img src="https://i.stack.imgur.com/0u1Am.png" alt="enter image description here"></a></p>
  
  <p>As you can see, I'm able to manually toggle the complete state and the component changes in the React tool but the change is not rendered. I changed the default state to make sure both icons are loaded correctly and they are. I made a <a href="https://codepen.io/jonathano_/pen/OOKKZd?editors=1010" rel="noreferrer" title="Codepen">Codepen</a> to try it in a different environment and this one <strong>works, but</strong> I am using the FA 4.7.0 CDN. With the Codepen and FA 4.7.0, when I inspect the icon, it is just an HTML element not SVG.</p>
  
  <p>I'd like to get this component working with FA 5 so any help would be appreciated!</p>