New to Telerik UI for BlazorStart a free 30-day trial

PanelBar Icons

Updated on Feb 11, 2025

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

To use PanelBar item icons, define a property in the component model class and assign the property name to the IconField parameter of the PanelBar.

The model property can hold:

  • A property of the static SvgIcon class;
  • A member of the FontIcon enum;
  • A string that is a CSS class for a custom icon.

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

Make sure to register font-icons.css if using Telerik font icons.

How to use icons in the Telerik PanelBar

<TelerikPanelBar Data="@PanelBarData">
    <PanelBarBindings>
        <PanelBarBinding IconField="@nameof(PanelBarItem.Icon)"></PanelBarBinding>
    </PanelBarBindings>
</TelerikPanelBar>

<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. */
        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>

<!-- Load this stylesheet only if using Telerik font icons -->
<link href="https://blazor.cdn.telerik.com/blazor/9.0/kendo-font-icons/font-icons.css" rel="stylesheet" type="text/css" />

@code {
    private List<PanelBarItem> PanelBarData { get; set; } = new List<PanelBarItem>();

    protected override void OnInitialized()
    {
        PanelBarData.Add(new PanelBarItem()
        {
            Id = 1,
            Text = "Home (SVG Icon)",
            ParentId = null,
            HasChildren = false,
            Icon = SvgIcon.Home
        });

        PanelBarData.Add(new PanelBarItem()
        {
            Id = 2,
            Text = "Contact Us (Font Icon)",
            ParentId = null,
            HasChildren = true,
            Icon = FontIcon.Book
        });

        PanelBarData.Add(new PanelBarItem()
        {
            Id = 3,
            Text = "Email",
            ParentId = 2,
            HasChildren = false,
            Icon = SvgIcon.Envelope
        });

        PanelBarData.Add(new PanelBarItem()
        {
            Id = 4,
            Text = "LinkedIn",
            ParentId = 2,
            HasChildren = false,
            Icon = SvgIcon.LinkedinBox
        });

        PanelBarData.Add(new PanelBarItem()
        {
            Id = 5,
            Text = "Custom Icon",
            ParentId = null,
            HasChildren = false,
            Icon = "my-icon my-icon-purple"
        });

        PanelBarData.Add(new PanelBarItem()
        {
            Id = 6,
            Text = "Empty Icon",
            ParentId = null,
            HasChildren = false,
            Icon = "my-icon "
        });

        base.OnInitialized();
    }

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

See Also

In this article
See Also
Not finding the help you need?
Contact Support