1. Home
  2. Forum
  3. Angular - EJ 2
  4. List of full icons in sample

List of full icons in sample

This sample demonostrates a simple navigation slider

https://ej2.syncfusion.com/16.1.24/angular/demos/#/fabric/sidebar/dock

It uses icons like

<span class="e-icons profile" ...

Where are the rest of icons ? Which icons ? from which library (bootstrap, ..) ?

5 Replies
PK Prem Kumar Madhan Raj Syncfusion Team March 12, 2018 12:30 PM UTC

Hi Ibraheem,   
  
Thanks for contacting Syncfusion Support.   
  
We have our own collection of icons for our components. Please check the attachment in the below link to know about all available icons.   
  
  
Please note that we need to use prefix class e-icons, before icon name to make use of these icons.   
  
Regards, 
Prem Kumar M 


IK I K March 12, 2018 01:54 PM UTC

I tried to change profile class to exit class:


<li class="sidebar-item" [routerLinkActive]='["link-active"]'>
        <a [routerLink]='["/gates"]'>
          <span class="e-icons exit"></span>
          <span class="e-text" title="Gates">Gates</span>
        </a>
      </li>

But it does not display anything. In profile class was working fine.

SP Sureshkumar P Syncfusion Team March 13, 2018 01:00 PM UTC

Dear customer, 
 
We have used font icons in our source. So, while using our Syncfusion icons you need to set the icons content value in the corresponding CSS file. We have loaded the corresponding icons through our CSS file (https://cdn.syncfusion.com/ej2/fabric.css  - based on theme). Please refer to the attached code block. 
[sample.html] 
 
<head> 
        <link rel='nofollow' href="https://cdn.syncfusion.com/ej2/fabric.css" rel="stylesheet" /> 
 </head> 
 
[sample.css] 
 
#iconsTable .clear::before { 
    content: '\e760'; 
    } 
      
    #iconsTable .exit::before { 
    content: '\e7c0'; 
    } 
  
For your convenience we have created Plunker sample with your requirement. Please refer the Sample: https://plnkr.co/edit/Hx826kKkExg7suQZaq4f?p=preview   
  
Regards, 
Sureshkumar P 


SV Sandeep Vaid September 15, 2021 10:54 AM UTC

We are using latest syncfusion angular library. but the codes (eq. e797) are not matching with the documentation. For example, as per doc -  e797 is for TreeViewError but we if we specify that in our code, we get some different icon


SM Shalini Maragathavel Syncfusion Team September 16, 2021 01:58 PM UTC

Hi Sandeep, 

Greetings from Syncfusion support.
                                                                                                                                         
Based on your query, we suspect that you are facing an issue in setting the icons in the Sidebar component. So we have prepared a Sidebar sample and set the icon with the content as ‘e797’(TreeViewError icon) but we did not face the mentioned issue at our end as it sets the TreeViewError icon properly.  
We have attached our validated sample for your reference.

Sample: https://stackblitz.com/edit/angular-a3nvnb?file=index.html 
Please check the below link for details on our icons library for various icons. 
 


Note: Please ensure whether you have used Syncfusion bootstrap4 theme in your application. Since the TreeViewError (e797) is bootstrap4 theme icon. 
If your reported problem persists, then please share the following information to validate further. 

  • If possible, replicate your reported problem in the above sample or provide us a simple sample to replicate the issue.
  • Video demonstration of the issue.
  • Which Syncfusion theme have you referred in your application?
This information would help us to find the exact cause of your reported problem and to provide you the prompt solution. 
Regards,  
Shalini M. 


Loader.
Up arrow icon