Using FontAwesome Icons with TreeView in Vue

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 Vue packages and Font Awesome
2. Import Wijmo and Font Awesome styles in main.js
3. Register the Wijmo Vue Nav module and use the <wj-tree-view> component
4. Provide a data source with optional kind/icon hints
5. Implement an onFormatItem(s, e) method that injects an <i> element with FA classes
6. Bind the handler with @formatItem="onFormatItem" so it runs on initial render
7. (Optional) Handle @isCollapsedChanged="onIsCollapsedChanged" to toggle folder open/closed icons and add small CSS spacing

Getting Started:

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

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

Import Wijmo and Font Awesome styles in main.js Import wijmo.css and Font Awesome’s CSS in your entry file so styles and webfonts load before the app renders.

// src/main.js
import { createApp } from 'vue'
import App from './App.vue'


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


createApp(App).mount('#app')

Register and use <wj-tree-view> The Vue 3 wrapper exports ready-to-use components when you import the module once in the SFC. You can directly use <wj-tree-view> in your template.

Provide a data source with optional kind/icon hints

// 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 onFormatItem and (optional) onIsCollapsedChanged This method prepends a Font Awesome icon inside each node’s label. Defaults use free FA Solid icons for broad compatibility.

Bind the handler with @formatItem="onFormatItem" so it runs on initial render:

<!-- src/App.vue -->
<template>
  <div class="app">
    <h1>Wijmo TreeView + Font Awesome (Vue 3)</h1>
    <wj-tree-view
      :itemsSource="treeData"
      displayMemberPath="header"
      childItemsPath="items"
      @formatItem="onFormatItem"
      @isCollapsedChanged="onIsCollapsedChanged"
    />
  </div>
</template>

<script setup>
import * as wjVueNav from "@mescius/wijmo.vue3.nav"; // ensures components are registered
import { treeData } from "./data";

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/virtualization
  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" // 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);
}

function onIsCollapsedChanged(s, e) {
  const node = e.node;
  if (!node || !node.hasChildren) return;
  const label = node.element?.querySelector(".wj-node-text") || node.element;
  if (!label) return;

  let i = 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);
}
</script>

<style>
.app {
  max-width: 900px;
  margin: 3rem auto;
  padding: 1.25rem 1.5rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
}
.app h1 {
  margin-top: 0;
  font-size: 1.25rem;
}
.wj-treeview .wj-node .wj-node-text i {
  margin-right: 8px;
  width: 1.25em;
  text-align: center;
}
</style>

With the code implemented correctly, you now have Font Awesome icons in your TreeView! I hope you find this article helpful. Happy coding!