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

Context Menu Icons

You can add a Telerik Font or SVG icon to the ContextMenu item by assigning a string to the IconField parameter.

How to use icons in Telerik Context Menu

<div id="context-menu-target" style="background:yellow;">right click for context menu</div>

<TelerikContextMenu Data="@MenuData"
                    Selector="#context-menu-target"
                    IconField="@nameof(MenuModel.TelerikFontIcon)">
</TelerikContextMenu>

@code {
    public List<MenuModel> MenuData { get; set; }

    protected override void OnInitialized()
    {
        GenerateMenuData();
    }

    public void GenerateMenuData()
    {
        MenuData = new List<MenuModel>()
        {
            new MenuModel()
            {
                Text = "Font Icon",
                TelerikFontIcon = FontIcon.Envelop
            }
        };
    }

    public class MenuModel
    {
        public string Text { get; set; }
        public FontIcon? TelerikFontIcon { get; set; }
    }
}

See Also

In this article