Using FontAwesome Icons with TreeView in React

Background:

Sometimes you may want to show contextual icons (folders, files, links, brands) next to each node in a Wijmo TreeView. TreeView supports customizing node content via the formatItem hook, and Font Awesome provides a large, lightweight icon set. To ensure icons render on first load, bind the handler through the formatItem prop and import the Font Awesome stylesheet so the webfonts are available.

Steps to Complete:

1. Install Wijmo React packages and font awesome
2. Import Wijmo and Font Awesome styles to the app entry
3. Provide a data source with optional kind/icon hints
4. Implement an onFormatItem handler that injects an <i> element with FA classes
5. Pass the handler via the TreeView formatItem prop (so it runs on initial render)

Getting Started:

Install Wijmo React packages and font awesome

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

Import Wijmo and Font Awesome styles to the app entry

// src/main.jsx
import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'

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

ReactDOM.createRoot(document.getElementById('root')).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

Provide a data source with optional kind/icon hints

You can drive icons from simple metadata on each item.

// src/data.js
export 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' }
]

Implement an onFormatItem handler that injects an <i> element with FA classes

This function prepends an icon inside each node’s label. Defaults use free FA Solid icons for broad compatibility.

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

  // de-dupe across refreshes
  const existing = label.querySelector('.fa-solid, .fa-regular, .fa-brands')
  if (existing) existing.remove()

  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)
}

Pass the handler via the TreeView formatItem prop (so it runs on initial render)

Binding via the prop ensures the handler is active during the very first render (avoids the issue where icons only appear after a hot reload).

// src/App.jsx (full component)
import * as wjNav from '@mescius/wijmo.react.nav'
import { treeData } from './data'

export default function App() {
  return (
    <div className="app">
      <h1>Wijmo TreeView + Font Awesome</h1>
      <wjNav.TreeView
        itemsSource={treeData}
        displayMemberPath="header"
        childItemsPath="items"
        formatItem={onFormatItem}
      />
    </div>
  )
}

If set up correctly, your TreeView will now have FontAwesome icons. Hope you find this article helpful. Happy coding!