SubMenu Icon

[Daniel Salyi]

Hey,

I am having difficulties try to make a submenu with CssIcons. I tried everything but nothing seem to work.

https://imgur.com/a/mRt9Eg2

I am unable to make a submenu with css icons and edit the it's color.

I attached my sourcefile as well. (deleting some logic and setting the "MainMenuItemsAuthorized" as the Itemsoruce of the bar " SfMenu Items="@MainMenuItems" should be enough to reporduce the problem

Thanks in advance

Attachment: MainLayout_5467b15c.rar

[Mohan Kumar Ramasamy]

Hi Daniel, 

 

We have checked your query, we would suggest you to set correct icon CSS in `IconCss` property. For your reference we have changed your sample based on this, please refer below sample and find the below code snippet. 

 

Sample Link:  https://www.syncfusion.com/downloads/support/forum/156672/ze/156672-BlazorApp1-616902796  

 

public List<MenuItem> MainMenuItemsAuthorized = new List<MenuItem>{ 

        new MenuItem { 

            Text = "Profilom", IconCss = "icon-user icon", 

                Items = new List<MenuItem> { 

                    new MenuItem{ Text = "Szerkesztés", IconCss="em-icons e-file", Url="/Editprofile" }, 

                    new MenuItem{ Url="/logout", Text = "Kijelenkezés", IconCss="em-icons e-tool"} 

                } 

            }, 

        new MenuItem { 

            Text = "Tananyag", 

            IconCss = "e-icons icon-lessons", 

            Items = new List<MenuItem> { 

                new MenuItem{ IconCss="icon-timeline icon", Url="/lessons", Text = "igeidők" }, 

                new MenuItem{ Text = "Add Name", IconCss = "em-icons e-file" }, 

                new MenuItem{ Text = "Add Details", IconCss = "em-icons e-file " } 

            } 

        } 

    }; 

<style> 

    @@font-face { 

        font-family: 'em-icons'; 

        src: url(data:application/x-font-ttf;charset=utf-8;base64,) format('truetype'); 

        font-weight: normal; 

        font-style: normal; 

    } 

 

    .em-icons { 

        font-family: 'em-icons'; 

    } 

 

    .e-file::before { 

        content: '\e700'; 

    } 

·         Create the CSS rule font-face and then add the font-family and src resources as mentioned below. 

·         font-family – Specifies a name that will be used as a font face value for font properties. 

·         src – Specifies the base64 formatted font icons data. 

·          

For your reference, please refer below online sample link. 

 

Link: https://blazor.syncfusion.com/demos/menu-bar/default-functionalities?theme=bootstrap4 

Documentation Link: https://blazor.syncfusion.com/documentation/menu-bar/icons/ 

 

The Syncfusion Blazor library provides the set of base64 formatted font icons, that can be utilized in the web application. Please refer below documentation link. 

 

Link: https://blazor.syncfusion.com/documentation/appearance/icons/ 

Please let us know, if you need any further assistance, 

 

Regards, 

Mohankumar R