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
SvgIconclass; - A member of the
FontIconenum; - A
stringthat 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.cssif using Telerik font icons.
How to use icons in the Telerik Menu
<TelerikMenu Data="@MenuData"
IconField="@(nameof(MenuItem.Icon))"
Orientation="@MenuOrientation.Vertical">
</TelerikMenu>
<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/6.0.2/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; }
}
}