title: Put a Font Awesome icon dynamically on input text background using React and react-fa
body: <p>I'm using <code>ReactJs</code> and <code>react-fa</code> to access Font Awesome icons. I need to put one of the icons inside a text input dynamically.</p>
  
  <p>Here is my code:</p>
  
  <pre><code>    import React, { Component } from 'react';
      import PropTypes from 'prop-types';
      import { Icon } from 'react-fa';
  
      import '../index.css';
  
      class SearchInput extends Component {
  
          static propTypes = { 
            onKeyUp: PropTypes.object,
            placeholder: PropTypes.placeholder,
            iconName: PropTypes.string
          };
  
  
          handleKeyUp = (content) =&gt; {
  
              console.log(content);
  
          }
  
          render() {
  
                  let icon = &lt;Icon name={this.props.iconName} /&gt;;
  
                  let extra = {
                      backgroundImage: icon
                  }
  
                  return (
                      &lt;input className='ux-search-input' style={extra} type='text' onKeyUp={this.handleKeyUp} placeholder={this.props.placeholder} /&gt;
                      );
          }
      };
  
      export default SearchInput;
  </code></pre>
  
  <p>This does not work - no icons at all. Repair that in that case I have no URLs to match, as the <code>icon</code> variable will be a ReactJs component.</p>