Context Menu Icons

Updated on Jan 27, 2026

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

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

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

<div class="context-menu-target" style="width:200px; height: 100px; background: yellow; margin-bottom: 50px;">
    Right click (or tap-and-hold on a touch device) for a context menu.
</div>

<TelerikContextMenu Data="@MenuData"
                    Selector=".context-menu-target"
                    IconField="@(nameof(MenuItem.Icon))">
</TelerikContextMenu>

<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/13.0.0/kendo-font-icons/font-icons.css" 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

• Online Demo: Context Menu Icons
• Context Menu Overview