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

Menu Icons

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

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

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 Menu 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 Menu

<TelerikMenu Data="@MenuData"

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

<!-- Load this stylesheet only if using Telerik font icons -->
<link href="" rel="stylesheet" type="text/css" />

@code {
    private List<MenuItem> MenuData { get; set; }

    protected override void OnInitialized()
        MenuData = new List<MenuItem>()
            new MenuItem()
                Text = "SVG Icon",
                Icon = SvgIcon.Envelope
            new MenuItem()
                Text = "Font Icon",
                Icon = FontIcon.Wrench,
            new MenuItem()
                Text = "Custom Icon",
                Icon = "my-icon my-icon-purple"
            new MenuItem()
                Text = "Empty Icon",
                Icon = "my-icon"

    public class MenuItem
        public string Text { get; set; }
        public object Icon { get; set; }

See Also

In this article