New to KendoReact? Start a free 30-day trial

TreeView Icons

The TreeView provides the option to add an icon for each node in the component. To render an icon you need to:

Set a value for the iconField property.
Once the iconField is set, use its value as a property in the definition of each node for which you want to display an icon.

If the value of the iconField is set to myIcon the data passed to the TreeView should look similar to the following; each node definition has a myIcon property that receives an icon.

const tree = [
  {
    text: "My Documents",
    myIcon: starIcon,
    expanded: true,
    items: [
      {
        text: "KendoReact Project",
        myIcon: xIcon,
        expanded: true,
        items: [
          {
            text: "about.html",
            myIcon: imageIcon,
          },
          .............

The following example demonstrates how to use the iconField property:

Change Theme

Theme

Loading ...

TreeView Icons

Suggested Links