New to Telerik UI for Blazor? Download free 30-day trial

TreeView Icons

You can add a Telerik Font or SVG icon to the TreeView item to illustrate its purpose by using the IconField parameter. The TreeView also supports custom icons.

If the icon property name in the TreeView model is Icon, there is no need to define the IconField parameter.

How to use icons in the Telerik TreeView

<TelerikTreeView Data="@TreeViewData">
    <TreeViewBindings>
        <TreeViewBinding IconField="@nameof(TreeItem.Icon)" />
    </TreeViewBindings>
</TelerikTreeView>

<style>
    .my-icon {
        /* define a background image or a custom font icon here */
        background: purple;
    }
</style>

@code {
    private List<TreeItem> TreeViewData { get; set; }

    protected override void OnInitialized()
    {
        TreeViewData = new List<TreeItem>();

        TreeViewData.Add(new TreeItem()
        {
            Id = 1,
            Text = "Font Icon",
            ParentId = null,
            HasChildren = true,
            Icon = FontIcon.Home
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 2,
            Text = "SVG Icon",
            ParentId = 1,
            HasChildren = false,
            Icon = FontIcon.Envelop
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 3,
            Text = "Custom Icon",
            ParentId = 1,
            Icon = "my-icon"
        });
    }

    public class TreeItem
    {
        public int Id { get; set; }
        public string Text { get; set; }
        public bool HasChildren { get; set; }
        public int? ParentId { get; set; }
        public object Icon { get; set; }
    }
}

See Also

In this article