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. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

Help getting icons to work correctly

Thread ID:





132697 Sep 15,2017 07:08 PM UTC Sep 18,2017 09:55 AM UTC JavaScript 1
Tags: ejmNavigationDrawer
Asked On September 15, 2017 07:08 PM UTC

I am having the hardest time getting icons to work in some of your controls, in this case the navigationDrawer. I am using aurelia-cli.

I have copied the example from your documentation https://help.syncfusion.com/js/navigationdrawer/getting-started.  I have also modified the class data-ej-imageclass to be e-icon e-profile even though in the documentation it is just icon-profile but it still does not work.

Attached is my project the navigationDrawer is located in src/components/my-drawer

To run:
npm install
au run

Attachment: client_a0d3cb3c.7z

Selvamani Sankarappan [Syncfusion]
Replied On September 18, 2017 09:55 AM UTC

Hi Dan, 

Thanks for contacting Syncfusion support. 

We did not add those icons in widgets.core.min.css file. So, that icons are not referred. You need to refer that icons manually in your CSS file and customize classes based on your application. Refer to the following code example: 
    @font-face { 
        font-family: 'ej-xlfont'; 
        src: url('../../common-images/tools/icons.eot'); 
        src: url('../../common-images/tools/icons.eot') format('embedded-opentype'), url('../../common-images/tools/icons.woff') format('woff'),url('../../common-images/tools/icons.woff') format('woff'), url('../../common-images/tools/icons.ttf') format('truetype'), url('../../common-images/tools/icons.svg') format('svg'); 
        font-weight: normal; 
        font-style: normal; 
    .e-home:before { 
        font-family: "ej-xlfont"; 
        content: "\e900"; 
    .e-profile:before { 
        font-family: "ej-xlfont"; 
        content: "\e901"; 
    .e-people:before { 
        font-family: "ej-xlfont"; 
        content: "\e902"; 
    .e-photos:before { 
        font-family: "ej-xlfont"; 
        content: "\e903"; 
    .e-communities:before { 
        font-family: "ej-xlfont"; 
        content: "\e904"; 
    .e-location:before { 
        font-family: "ej-xlfont"; 
        content: "\e905"; 
    .e-home, .e-profile, .e-people, .e-photos, .e-communities, .e-location { 
        font-size: 24px; 
        color: black; 
We have modified your sample. Refer to the following sample: 

Please let us know if you need any further assistance. 


Selvamani S. 


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.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon 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.Close Icon