Breadcrumb Icons

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

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

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 Breadcrumb 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 Telerik Breadcrumb

<TelerikBreadcrumb Data="@Data"></TelerikBreadcrumb>

<style>
    .my-icon {
        /* define a background image or a custom font icon here */
        background: purple;
        /* dimensions and other base styles will usually come from another class */
        width: 1em;
        height: 1em;
        font-size: 16px;
    }
</style>

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

@code {
    private IEnumerable<BreadcrumbItem> Data = new List<BreadcrumbItem>();

    protected override void OnInitialized()
    {
        Data = new List<BreadcrumbItem>() {
            new BreadcrumbItem() { Title = "Home", Icon = SvgIcon.Home },
            new BreadcrumbItem() { Text = "Arts (SVG)", Icon = SvgIcon.Palette },
            new BreadcrumbItem() { Text = "Photography (Font)", Icon = FontIcon.Photos },
            new BreadcrumbItem() { Text = "(Custom)", Icon = "my-icon" }
        };
    }

    public class BreadcrumbItem
    {
        public string Text { get; set; }
        public string Title { get; set; }
        public object Icon { get; set; }
    }
}

See Also

• Live Demo: Breadcrumb Items