Using FontAwesome Icons with TreeView in JavaScript

May 06 2026

Background:

Sometimes you want to show meaningful icons (folders, files, links, brands) next to each node in a Wijmo TreeView. The TreeView supports customizing node content via the formatItem event, and Font Awesome provides a large, lightweight set of web icons you can use.

The process involves importing Font Awesome styles and using a formatItem handler to inject <i> elements with the appropriate Font Awesome classes into each node.

Steps to Complete:

Install Wijmo and Font Awesome.
Import Wijmo and Font Awesome styles.
Provide a data source with optional kind or icon hints.
Implement a formatItem handler that injects Font Awesome icons.
Initialize the TreeView and attach the handler.

Getting Started:

Install Wijmo and Font Awesome

Ensure the required libraries are available in your project.

npm i @mescius/wijmo @mescius/wijmo.nav @mescius/wijmo.styles @fortawesome/fontawesome-free

@mescius/wijmo.nav includes the TreeView component.

Import Wijmo and Font Awesome styles

This loads the CSS required for Wijmo controls and Font Awesome icons.

import '@mescius/wijmo.styles/wijmo.css';
import '@fortawesome/fontawesome-free/css/all.min.css';

If you forget this step, icons will not render.

Provide a data source with optional `kind` or `icon` hints

This defines a hierarchical dataset with optional kind or icon properties to determine which Font Awesome icon should be displayed.

const treeData = [
  {
    header: 'Documents',
    kind: 'folder',
    items: [
      { header: 'Resume.pdf', kind: 'file' },
      { header: 'Project Plan.docx', kind: 'file' }
    ]
  },
  {
    header: 'Photos',
    kind: 'folder',
    items: [
      {
        header: 'Vacation',
        kind: 'folder',
        items: [
          { header: 'IMG_0001.jpg', kind: 'image' },
          { header: 'IMG_0002.jpg', kind: 'image' }
        ]
      },
      { header: 'Family.png', kind: 'image' }
    ]
  },
  {
    header: 'GitHub',
    kind: 'link',
    icon: 'fa-brands fa-github'
  }
];

kind allows default icon logic.
icon explicitly overrides the icon class.

Implement a `formatItem` handler that injects Font Awesome icons

This injects a Font Awesome <i> element into each node during rendering.

function onFormatItem(s, e) {
  const item = e.dataItem;
  const label = e.element.querySelector('.wj-node-text') || e.element;
  if (!label) return;

  // Remove previously injected icon (avoid duplicates)
  const existing = label.querySelector('.fa-solid, .fa-regular, .fa-brands');
  if (existing) existing.remove();

  // Determine icon class
  const iconClass = item.icon ||
    (
      item.kind === 'folder' || (Array.isArray(item.items) && item.items.length)
        ? 'fa-solid fa-folder'
        : item.kind === 'image'
          ? 'fa-solid fa-image'
          : item.kind === 'link'
            ? 'fa-solid fa-link'
            : 'fa-solid fa-file'
    );

  const i = document.createElement('i');
  i.className = iconClass;
  i.setAttribute('aria-hidden', 'true');

  label.insertAdjacentElement('afterbegin', i);
}

formatItem runs for each node.
We determine which icon to use based on icon or kind.
We prepend the icon element to the node label.
We remove previously injected icons to avoid duplication during rerender.

Initialize the TreeView and attach the handler

This creates the TreeView and attaches the formatItem handler.

<div id="theTree"></div>

import * as wjcNav from '@mescius/wijmo.nav';

const tree = new wjcNav.TreeView('#theTree', {
  itemsSource: treeData,
  displayMemberPath: 'header',
  childItemsPath: 'items'
});

tree.formatItem.addHandler(onFormatItem);