Using FontAwesome Icons with TreeView in Angular

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 event, and Font Awesome provides a large, lightweight icon set. To ensure icons render on first load, handle formatItem directly on the component (not only after initialization) and include the Font Awesome stylesheet so the webfonts are available.

Steps to Complete:

1. Install Wijmo Angular packages and Font Awesome
2. Add Wijmo and Font Awesome styles in angular.json (or styles.css)
3. Import WjNavModule in your Angular module
4. Provide a data source with optional kind/icon hints
5. Implement an onFormatItem(s, e) handler that injects an <i> element with FA classes
6. Bind the handler with (formatItem)="onFormatItem(s, e)" so it runs on initial render
7. (Optional) Handle (isCollapsedChanged) to toggle folder open/closed icons and add small CSS spacing

Getting Started:

Install Wijmo Angular packages and Font Awesome Use your package manager to add Wijmo and Font Awesome to your Angular app:

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

Add Wijmo and Font Awesome styles in angular.json Add the styles so they load before the app renders:

// angular.json { "projects": { "your-app": { "architect": { "build": { "options": { "styles": [ "node_modules/@mescius/wijmo.styles/wijmo.css", "node_modules/@fortawesome/fontawesome-free/css/all.min.css", "src/styles.css" ] } } } } } }

Import WjNavModule in your Angular module

// src/app/app.module.ts import { NgModule } from '@angular/core' import { BrowserModule } from '@angular/platform-browser' import { AppComponent } from './app.component' import { WjNavModule } from '@mescius/wijmo.angular2.nav' @NgModule({ declarations: [AppComponent], imports: [BrowserModule, WjNavModule], bootstrap: [AppComponent] }) export class AppModule {}

Provide a data source with optional kind/icon hints

// src/app/app.component.ts import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styleUrls: ['./app.component.css'], }) export class AppComponent { 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' }, ]; // Inject Font Awesome icons on initial render onFormatItem(s: any, e: any) { const item = e.dataItem; const label: HTMLElement = e.element.querySelector('.wj-node-text') || e.element; if (!label) return; // de-dupe across refreshes/virtualization label.querySelector('.fa-solid, .fa-regular, .fa-brands')?.remove(); const iconClass = item?.icon ?? (item?.kind === 'folder' || (Array.isArray(item?.items) && item.items.length) ? 'fa-solid fa-folder' // default closed folder (free) : 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); } // Optional: toggle folder icon on expand/collapse onIsCollapsedChanged(s: any, e: any) { const node = e.node; if (!node || !node.hasChildren) return; const label: HTMLElement = node.element?.querySelector('.wj-node-text') || node.element; if (!label) return; let i: HTMLElement | null = label.querySelector( 'i.fa-folder, i.fa-folder-open' ); if (!i) { i = document.createElement('i'); i.className = 'fa-solid fa-folder'; i.setAttribute('aria-hidden', 'true'); label.insertAdjacentElement('afterbegin', i); } const collapsed = node.isCollapsed; i.classList.toggle('fa-folder', collapsed); i.classList.toggle('fa-folder-open', !collapsed); } }

Implement the template and bind the events Bind formatItem so it runs during the initial render; optionally bind isCollapsedChanged to toggle folder icons.

<!-- src/app/app.component.html --> <div class="app"> <h1>Wijmo TreeView + Font Awesome (Angular)</h1> <wj-tree-view [itemsSource]="treeData" displayMemberPath="header" childItemsPath="items" (formatItem)="onFormatItem(s, e)" (isCollapsedChanged)="onIsCollapsedChanged(s, e)" ></wj-tree-view> </div>

If implemented correctly, you now have working icons in your TreeView! I hope you found this article helpful. Happy coding!