how to add icon in e-menu-item

[afiqdoherty]

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]

Hi Muhammad,   

   

Thank you for contacting Syncfusion Support.   

   

We have prepared a sample based on your requirement. Please refer to the given link    

   

Sample: http://www.syncfusion.com/downloads/support/forum/131575/ze/Sample-586419928.zip   

   

UG Link: https://help.syncfusion.com/aspnet-core/menu/icons-and-navigation   

   

   

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   

   

UG Link: https://help.syncfusion.com/js/icon/ej-icons   

   

We can also use imageUrl field to add an image in menu item.    

   

   

Regards,   

Keerthana.   

[afiqdoherty]

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]

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   

   

Sample: http://www.syncfusion.com/downloads/support/forum/131575/ze/CoreApplication-864009746.zip   

   

   

Regards,   

Keerthana.