Font awesome icon not displaying inside ag-grid cell in Angular 8

Question

I'm trying to learn Angular so following guides on installing and using ag-grid and Font Awesome, but I can't get an fa-icon to display inside an ag-grid cell using the cellRenderer. If I use the same icon HTML outside of the grid, it displays correctly. And if I put something like a link in place of the icon in the cell, it displays correctly. Here is my code:

component.ts

    import { Component } from '@angular/core'

import { faUserEdit } from '@fortawesome/free-solid-svg-icons';

@Component({
  selector: 'app-user',
  templateUrl: './user.component.html',
  styleUrls: ['./user.component.scss']
})
export class UserComponent {
  faUserEdit = faUserEdit;

  columnDefs = [
    {
      headerName: '', field: 'id',
      cellRenderer: (params) =>
        '<fa-icon [icon]="faUserEdit"></fa-icon>'
    },
    { headerName: 'Last Name', field: 'lastName'},
    { headerName: 'First Name', field: 'firstName'}
  ]
...

component.html

<ag-grid-angular class="ag-theme-material"
             [rowData]="users"
             [columnDefs]="columnDefs">
</ag-grid-angular>

Without looking into exactly why (may be due to how they render their grid), I do see that ag has it's own icons and methods of changing/overriding those icons. If all else fails, you could look into that ag-grid.com/javascript-grid-icons — canpan14

un.spike un.spike · Accepted Answer · 2020-03-04T15:16:15

Remember, when you use inline cellRenderer - you can implement just HTML template (no logic), for logic handling you need to create custom cellRenderer which will contain needed functions and so on.

you wouldn't be able to execute component functions through cellRenderer inline implementation

But back to your issue here is a solution:

cellRenderer: (params) => { return '<i class="fas fa-user-edit"></i>'; }

Demo

Font awesome icon not displaying inside ag-grid cell in Angular 8

1 Answers