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

TreeView Icons

You can add Telerik Font or SVG icons to the TreeView items. The component also supports custom icons.

To use TreeView item icons, define a property in the component model class and assign the property name to the IconField parameter of the respective TreeViewBinding. The model property can hold a FontIcon enum, an ISvgIcon, or a string that signifies a CSS class.

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

How to use icons in the Telerik TreeView

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

<style>
    /* Third-party icon libraries should provide these styles out-of-the-box. */

    /* base styles for all custom icons */
    .my-icon {
        /* Define size, position and font styles here. */
        display: inline-block;
        width: 1em;
        height: 1em;
        font-size: 16px;
    }

    /* styles for specific custom icons */
    .my-icon-purple {
        /* define a background image or a font icon glyph 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 my-icon-purple"
        });

        TreeViewData.Add(new TreeItem()
        {
            Id = 4,
            Text = "Empty 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