Get dynamic icon in Angular TreeView component

27 Aug 20254 minutes to read

The TreeView component allows you to retrieve the original bound data using the getTreeData method. When you pass a node ID to this method, it returns the corresponding node information; when called without parameters, it returns information for all tree nodes. You can use this method to get the bound iconCss class within events like nodeChecking, enabling dynamic icon retrieval based on node states or user interactions.

Please refer to the following sample for an implementation example.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'
import { FormsModule } from '@angular/forms'
import { TreeViewModule } from '@syncfusion/ej2-angular-navigations'
import { Component, Inject, ViewChild } from '@angular/core';
import { TreeViewComponent } from '@syncfusion/ej2-angular-navigations';
import { NodeCheckEventArgs } from '@syncfusion/ej2-navigations';
/**
 * Icon css sample
 */
@Component({
  imports: [
    FormsModule, TreeViewModule
  ],
  standalone: true,
  selector: 'app-container',
  template: `<div id='treeparent'><ejs-treeview id='treeElement' #treevalidate [fields]='field'  (nodeChecking)='onNodeCheck($event)' [showCheckBox]=true [autoCheck]=false></ejs-treeview></div>`
})
export class AppComponent {
  // Data source for TreeView component
  public treeData: Object[] = [
    {
      "nodeId": "01", "nodeText": "Music", "icon": "folder", "expanded": true, "nodeChild": [
        { "nodeId": "01-01", "nodeText": "Gouttes.mp3", "icon": "audio" }
      ]
    },
    {
      "nodeId": "02", "nodeText": "Videos", "icon": "folder", "expanded": true, "nodeChild": [
        { "nodeId": "02-01", "nodeText": "Naturals.mp4", "icon": "video" },
        { "nodeId": "02-02", "nodeText": "Wild.mpeg", "icon": "video" }
      ]
    }
  ];

  public field: Object = { dataSource: this.treeData, id: 'nodeId', text: 'nodeText', child: 'nodeChild', iconCss: 'icon', expanded: 'expanded' };

  @ViewChild('treevalidate') tree?: TreeViewComponent;

  public onNodeCheck(args: NodeCheckEventArgs): void {
    let nodeId: any = args.data[0]['id'];
    // To get the iconCss
    let iconClass = this.tree?.getTreeData(nodeId)[0]['icon'];
    alert('Icon class is ' + iconClass);
  }
}
@import 'node_modules/@syncfusion/ej2-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-inputs/styles/material.css';
@import 'node_modules/@syncfusion/ej2-buttons/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-base/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-navigations/styles/material.css';
@import 'node_modules/@syncfusion/ej2-angular-inputs/styles/material.css';

#treeparent {
    display: block;
    max-width: 400px;
    max-height: 320px;
    margin: auto;
    overflow: auto;
    border: 1px solid #dddddd;
    border-radius: 3px;
}

.e-treeview .e-list-img {
    width: 25px;
    height: 25px;
  }

  .e-treeview .e-list-icon {
    background-repeat: no-repeat;
    background-image: url(https://ej2.syncfusion.com/javascript/demos/src/treeview/images/icons/file_icons.png);
    height: 20px;
  }

  .e-treeview .e-list-icon.folder {
    background-position: -10px -552px 
  }

  .e-treeview .e-list-icon.audio {
    background-position: -10px -244px
  }

  .e-treeview .e-list-icon.video {
    background-position: -10px -272px
  }
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));