# Icon Template

Blazor Edition provides a set of native UI controls built for Blazor such as FlexGrid, Chart, ListView, and input controls including AutoComplete and ComboBox.

## Content



Menu supports adding icons to the menu items with a submenu. It lets you set a template for the icon of a menu item with a submenu using [OpenIconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuItem.OpenIconTemplate.html) property of the [C1MenuItem](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Menu/C1.Blazor.Menu.C1MenuItem.html) class. The **OpenIconTemplate** property creates the menu item icon using the [C1IconTemplate](/componentone/api/blazor/online-blazor/dotnet-api/C1.Blazor.Core/C1.Blazor.Core.C1IconTemplate.html) class. In the following example, we have set the TriangleRight icon for all the menu items with submenus.

![Blazor Menu Icon](https://cdn.mescius.io/document-site-files/images/f5b600ba-f1a7-4f89-a20c-aa6c0c35880d/images/menuicon.png)

To add an icon for the menu items with submenu using the OpenIconTemplate property, use the following code:

```razor
@using C1.Blazor.Menu
@using C1.Blazor.Input
@using C1.Blazor.Core
<C1Menu Style="@("width: 150px")" OpenIconTemplate="C1IconTemplate.TriangleRight"
    OpenOnClick="false" OnItemSelected="OnSelectedItem">
        <C1MenuItem Header="ComponentOne">
            <C1MenuItem Header="Platforms">
                <C1MenuItem Header="WinForms" />
                <C1MenuItem Header="WPF" />
                <C1MenuItem Header="WinUI" />
                <C1MenuItem Header="Blazor" />
                <C1MenuItem Header="MVC" />
                <C1MenuItem Header="UWP" />
                <C1MenuItem Header="Xamarin" />
                <C1MenuItem Header="Others" />
            </C1MenuItem>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Documentation">
                    <C1MenuItem Header="WinForms Edition" />
                    <C1MenuItem Header="WPF Edition" />
                    <C1MenuItem Header="WinUI Edition" />
                    <C1MenuItem Header="Blazor Edition" />
                    <C1MenuItem Header="MVC Edition" />
                    <C1MenuItem Header="UWP Edition" />
                    <C1MenuItem Header="Xamarin Edition" />
                    <C1MenuItem Header="Others Edition" />
                </C1MenuItem>
                <C1MenuItem Header="Blogs" />
            </C1MenuItem>
            <C1MenuItem Header="Samples" />
            <C1MenuItem Header="Licensing" />
            <C1MenuItem Header="Demos" />
        </C1MenuItem>
        <C1MenuItem Header="Wijmo">
            <C1MenuItem Header="Framework">
                <C1MenuItem Header="JavaScript" />
                <C1MenuItem Header="Angular" />
                <C1MenuItem Header="React" />
                <C1MenuItem Header="View" />
            </C1MenuItem>
            <C1MenuItem Header="Documentation"/>
            <C1MenuItem Header="Resources">
                <C1MenuItem Header="Blogs" />
                <C1MenuItem Header="Samples" />
                <C1MenuItem Header="Licensing" />
            </C1MenuItem>
            <C1MenuItem Header="Demos" />
        </C1MenuItem>
    </C1Menu>
@code {
    string selectedItem = "";
    public void OnSelectedItem(C1MenuItem item)
    {
        selectedItem = GetFullPath(item);
    }
    public static string GetFullPath(C1MenuItem item)
    {
        if (item.ParentItem == null)
            return item.Header;
        return $"{GetFullPath(item.ParentItem)} / {item.Header}";
    }
}
```