We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy.
Unfortunately, activation email could not send to your email. Please try again.

how to add icon in e-menu-item

Thread ID:

Created:

Updated:

Platform:

Replies:

131575 Jul 17,2017 10:38 AM Jul 19,2017 08:21 AM ASP.NET MVC 3
loading
Tags: Menu
afiqdoherty
Asked On July 17, 2017 10:38 AM

Hi, 

I need help in adding icon on top of the text of my e-menu-item. currently, the menu bar just showing text only. 
Need to add icon on top of the text "ADMINISTRATION" and "SECURITY". Below are my code.

          <e-menu-item text="ADMINISTRATION" url="" >
            <e-menu-child-items>
                <e-menu-child-item text="Pharmacy" url=""></e-menu-child-item>
                <e-menu-child-item text="General Consultation" url=""></e-menu-child-item>
                <e-menu-child-item text="Orders" url=""></e-menu-child-item>
                <e-menu-child-item text="Wellness" url=""></e-menu-child-item>
                <e-menu-child-item text="Master" url=""></e-menu-child-item>
                <e-menu-child-item text="Support Systems" url=""></e-menu-child-item>
            </e-menu-child-items>
        </e-menu-item>
        <e-menu-item text="SECURITY" url="">
            <e-menu-child-items>
                <e-menu-child-item text="Group" url=""></e-menu-child-item>
                <e-menu-child-item text="Role" url=""></e-menu-child-item>
            </e-menu-child-items>
        </e-menu-item>


Thanks :)



Keerthana Rajendran [Syncfusion]
Replied On July 18, 2017 01:29 AM

Hi Muhammad,   
   
Thank you for contacting Syncfusion Support.   
   
We have prepared a sample based on your requirement. Please refer to the given link    
   
   
   
   
We suggest you to use spriteCssClass property to add icon to menu item as shown below   
<e-menu-item text="ADMINISTRATION" url="" sprite-css-class="e-icon e-home" >   
            <e-menu-child-items>   
                <e-menu-child-item text="Pharmacy" url="" sprite-css-class="e-icon e-filter"></e-menu-child-item>   
                <e-menu-child-item text="General Consultation" url=""  sprite-css-class="e-icon e-info"></e-menu-child-item>   
                <e-menu-child-item text="Orders" url=""  sprite-css-class="e-icon e-document"></e-menu-child-item>   
                <e-menu-child-item text="Wellness" url=""   sprite-css-class="e-icon e-checkmark"></e-menu-child-item>   
                <e-menu-child-item text="Master" url="" sprite-css-class="e-icon e-user"></e-menu-child-item>   
                <e-menu-child-item text="Support Systems" url="" sprite-css-class="e-icon e-volume-up"></e-menu-child-item>   
            </e-menu-child-items>   
        </e-menu-item>   
   
Check the list of available “ej-icons” from the following link   
   
   
We can also use imageUrl field to add an image in menu item.    
   
   
Regards,   
Keerthana.   


afiqdoherty
Replied On July 18, 2017 02:59 AM

Thanks for the answer, it works using the existing icon.

can you show me how to put image in the menu? let say if i already has an icon image to put.


Thanks :)


Keerthana Rajendran [Syncfusion]
Replied On July 19, 2017 08:21 AM

Hi Muhammad,   
   
We suggest to use imageUrl field to add image icon in menu item by passing the path of image in this property. Please refer the code snipper   
   
   
  <e-menu-item text="SECURITY" url=""  image-url="../images/dark-arrow2.png">   
            <e-menu-child-items>   
                <e-menu-child-item text="Group" url="" sprite-css-class="e-icon e-circle"></e-menu-child-item>   
                <e-menu-child-item text="Role" url="" sprite-css-class="e-icon e-th"></e-menu-child-item>   
            </e-menu-child-items>   
        </e-menu-item>   
   
We have modified a sample based on this. Please refer to the given link   
   
   
   
Regards,   
Keerthana.   
 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.

;