DEV Community


Rendering multiple icons in AG Grid cell

Lorna Watson
Software Engineer from Leeds, UK. Easy-going, keen learner & motivated by all-things dev. ✨
・1 min read

End result 🥳

Alt Text


I've tried to strip out any irrelevant bits. Also to note I am using the free Font Awesome icons and community edition of AG Grid.

Deployments List Component


Include the new cell renderer component when setting up your col defs.

  field: 'DeployedBy', 
  cellRendererFramework: IconCellRendererComponent 
Enter fullscreen mode Exit fullscreen mode

Icon Cell Renderer Component


import { Component } from "@angular/core";
import { ICellRendererAngularComp } from 'ag-grid-angular';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { faUsers, faCity } from '@fortawesome/free-solid-svg-icons';

  selector: 'app-icon-cell-renderer',
  templateUrl: './icon-cell-renderer.component.html'
export class IconCellRendererComponent implements ICellRendererAngularComp {
  faUsers = faUsers;
  faCity = faCity;

  params: any;
  icons: IconDefinition[]; // ✨ if wanting just the 1 icon change to `IconDefinition`

  agInit(params: any): void {
    this.params = params;
    if (this.params.value === 'Teamcity') {
      this.icons = [faUsers, faCity];

    return this.params.value;

  refresh(): boolean {
    return false;
Enter fullscreen mode Exit fullscreen mode


I'm looking at tidying this up.

<span *ngIf="icons != null; else notSys">
  <span *ngFor="let icon of icons">
    <fa-icon [icon]="icon"></fa-icon>
<ng-template #notSys>
Enter fullscreen mode Exit fullscreen mode


@almost-black: #262626; {
  .ag-row .ag-cell fa-icon { 
    margin-left: 2px;
    margin-right: 2px;
    color: @almost-black; 
Enter fullscreen mode Exit fullscreen mode

Discussion (0)