List of Icons available for e-icons

Question

I am using the docked sidebar example available on your site, however I am unable to change the icons to anything but the four presented in the example. Is there a list of these somewhere. I have tried many of the other ones listed in various threads but they all just produce a blank area.

Example code that works, highlighted the part I am looking to change to different icons.

The only ones I can get to show are:

expand, home, profile, info, and settings

Suman Kumar G · Answer

Hi Chris,

Thanks for contacting Syncfusion Support.

Yes, we have our own collection of icons for our components and you can find them all with the attachment in the below link.

Attachment: http://www.syncfusion.com/downloads/support/forum/136359/ze/icons-1075505747

From the attachment - Open the demo.html file in browser and you can find the list of icons with name and content code.

Please note that we need to use prefix class e-icons before icon name (displayed below each icon in the attachment) as shown below to make use of these icons in your application.

Also, please make ensure that the CSS style sheet for these icons (style.css) is being referred in your application because if CSS reference is not referred, then only blank areas will be visible instead of icons.

Regards,

SumanKumar G

Chris Stadler · Answer

Thak you for the demo, i was able to get it to work. For others who may have this issue. I did the following using the demo provided below:

Imported the style sheet
had to remove all the excess icons and font specifications as it will override/conflict with your existing syncfusion themed stylesheets
add the icons you want in this format .e-chart-area:before { content: "\e723";}
then on your page reference them as the following <span class="e-icons e-chart-area icon" as even with the imported class they still don;t work by the name like the initial example shows.

Balaji M · Answer

Hi Chris,   
  Sorry for the inconvenience.     
 
We have checked with your query and suspect that the issue is because of removing the font specification styles in the page and also not adding the CSS reference (material.css) of our components in the page you have been testing. If so, then please refer the material.css or any other required  theme reference because the font specification styles are required to render the icons and the e-icons class only contains the font definitions for rendering our icons. 
 
For your reference we have created two sample where we have followed your case. Please check it. 
 
Issue reproducing sample: https://stackblitz.com/edit/typescript-ua3guc?file=style.css (Here only the icons class is added in styles.css file and material.css stylesheet for our components will not be referred) 
 
Issue cleared sample: https://stackblitz.com/edit/typescript-67fvx5?file=style.css (Here only the icons class is added in styles.css file and material.css stylesheet for our components will be referred and icon will be rendered) 
     
If this is not your case, then please get back to us with more information along with an issue reproduced sample so that we can validate and update a solution from our end. 
  
  
Regards, 
M. Balaji