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

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 FontIcon enum, an ISvgIcon, or a string that signifies a CSS class.

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

How to use icons in Telerik Breadcrumb

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

<style>
    /* Third-party icon libraries should provide these styles out-of-the-box. */
    /* You may need two CSS classes for the same element - 
        one for base icon styles and one for the specific icon glyph. */

    .my-icon {
        width: 1em;
        height: 1em;
        font-size: 16px;
        background: purple;
    }
</style>

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

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

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

See Also

In this article