1. Home
  2. Forum
  3. Blazor
  4. How to override MenuBar's toggle icon with another icon

How to override MenuBar's toggle icon with another icon

Hello,

I am using your SfMenu component to create an openable menu on the navbar.

I would like to override your component's toggle icon and I would like to place the user icon instead of your triangle icon.

Is there a way to achieve this behavior?

Regards,
Istvan

Attachment: menu_ef656e39.rar

5 Replies 1 reply marked as answer
MK Mohan Kumar Ramasamy Syncfusion Team September 17, 2020 01:03 PM UTC

Hi Szöke , 
 
We have checked your reported query, we can achieve your requirement using CSS Style. Please refer the below code snippets. 
 
 
@using Syncfusion.Blazor.Navigations  
@inject IJSRuntime JsRunTime 
 
<div class="control-section"> 
    <div class="menu-control"> 
        <SfMenu @ref="MenuRef" Items="@menuItems" ID="FileItem"> 
            <MenuEvents Created="Created"></MenuEvents> 
        </SfMenu> 
    </div> 
</div> 
@code{        
 
        SfMenu MenuRef; 
    private async Task Created() 
    { 
            await JsRunTime.InvokeVoidAsync("UpdateCss", MenuRef.ID); 
    } 
 
    private List<MenuItem> menuItems = new List<MenuItem>{ 
            new MenuItem 
            { 
                Text = "File", 
                IconCss = "em-icons e-file", 
                Items = new List<MenuItem> 
            { 
                    new MenuItem { Text= "Open" }, 
                    new MenuItem { Text= "Save" }, 
                    new MenuItem { Separator= true }, 
                    new MenuItem { Text= "Exit" } 
                } 
            } 
            }; 
} 
<style> 
 
    .e-file.caret-icon { 
        font-size: 9px; 
        padding-left: 4px; 
    } 
 
    @@font-face { 
        font-family: 'em-icons'; 
        src: url(data:application/x-font-ttf;charset=utf-8;base64,AA =) format('truetype'); 
        font-weight: normal; 
        font-style: normal; 
    } 
 
    .em-icons { 
        font-family: 'em-icons'; 
    } 
 
    .e-file::before { 
        content: '\e700'; 
    } 
 
    .menu-control { 
        margin: 45px auto 0; 
        text-align: center; 
    } 
</style> 
 
 
For your reference, we have prepared a sample based on this, Please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 


SI Szöke Istvan September 21, 2020 06:57 AM UTC

Hi Mohankumar,

Thanks for the update.

I have a problem with this solution. I would like to only override the triangle icon (which is for opening the menu), but I don't want to put an icon BEFORE the menu item.
So If I remove the following line from your demo to remove the icon before, the solution doesn't work and the triangle won't be overridden:

IconCss = "em-icons e-file"

I demonstrated my requirement with the attached screenshot.

Regards,
Istvan



Attachment: screenshot_e752cb17.rar

MK Mohan Kumar Ramasamy Syncfusion Team September 23, 2020 06:12 AM UTC

Hi Szöke ,  
  
We have checked your provided image, we can achieve your requirement using CSS Style. Please refer the below code snippets. 
 

div class="control-section"> 
    <div class="menu-control"> 
        <SfMenu @ref="MenuRef" Items="@menuItems" ID="FileItem"> 
            <MenuEvents Created="Created"></MenuEvents> 
        </SfMenu> 
    </div> 
</div> 
@code{        
 
        SfMenu MenuRef; 
    private async Task Created() 
    { 
            await JsRunTime.InvokeVoidAsync("UpdateCss"); 
    } 
 
    private List<MenuItem> menuItems = new List<MenuItem>{ 
            new MenuItem 
            { 
                Text = "File", 
                Id = "file", 
                Items = new List<MenuItem> 
            { 
                    new MenuItem { Text= "Open" }, 
                    new MenuItem { Text= "Save" }, 
                    new MenuItem { Separator= true }, 
                    new MenuItem { Text= "Exit" } 
                } 
            } 
            }; 
} 
<style> 
 
    #file .caret-icon { 
        font-size: 9px; 
        padding-left: 4px; 
    } 

</style> 


<script> 
        function UpdateCss() { 
            var element = document.getElementById("file").getElementsByClassName("e-caret")[0]; 
            element.className = ""; 
            element.classList.add("em-icons", "e-file", "caret-icon"); 
        } 
        </script> 
 
For your reference, we have prepared a sample based on this, Please refer below link. 
 
 
Please let us know, if you need any further assistance. 
 
Regards, 
Mohankumar R 


Marked as answer
SI Szöke Istvan September 23, 2020 10:41 AM UTC

Hi Mohankumar,

Thanks for your help.

Regards,
Istvan

MK Mohan Kumar Ramasamy Syncfusion Team September 24, 2020 02:39 PM UTC

Hi Szöke,   
  
Thanks for the update.  
 
We are happy to hear that your requirement has been fulfilled. Please feel free to contact us if you need any further assistance on this. 
 
Regards, 
Mohankumar R 


Loader.
Up arrow icon