title: Ag-grid cellRenderer with Font Awesome Icons
body: <p>I am attempting to add <a href="https://github.com/FortAwesome/angular-fontawesome" rel="nofollow noreferrer">Font Awesome</a> Icons via cellRenderer in ag-grid.</p>
  
  <p>How can I properly render <code>&lt;fa-icon&gt;</code> tags within a cell render?</p>
  
  <p>Here is what I attempted:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>    {
        width: 150,
        headerName: 'Events',
        // tslint:disable-next-line: object-literal-shorthand
        cellRenderer: (params: any) =&gt; {
          const PHD: boolean = params.data.PHD;
          const DG: boolean = params.data.DG;
          const HOT: boolean = params.data.HOT;
          let result = '';
          if (PHD) {
            result = result + '&lt;fa-icon [icon]="faCoffee"&gt;&lt;/fa-icon&gt;';
          }
          if (DG) {
            result = result + '';
          }
          if (HOT) {
            result = result + '';
          }
          return result;
        },
        resizable: true,
        filter: false,
      },</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is how it renders from cellRenderer:
  <a href="https://i.stack.imgur.com/fRsLu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/fRsLu.png" alt=""></a></p>
  
  <p>Placing the  tag within the component HTML works and renders to the page like this:
  <a href="https://i.stack.imgur.com/Tpt3p.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Tpt3p.png" alt=""></a></p>