No icon is shown.

[Lim Wee Beng]

I did try the syncfusion sample code. However, after npm run serve, no icon is shown. It just shows up the number. May I know why? What is the reference that I have missed out?

Attachment: Capture_(2)_6ddd6261.zip

[Shalini Maragathavel]

Hi Lim, 

Greetings from Syncfusion support.
                                                                                                                                         

We have validated your sample and found that you have not set the icon content properly in your application, which is the cause of the issue. To overcome the reported issue, we suggest you to set content property to the required icon class as demonstrated in the below code snippet, 

#sidebar-treeview #main-treeview .icon-microchip::before { 

  content: "\e806"; 

} 

#sidebar-treeview #main-treeview .icon-thumbs-up-alt::before { 

  content: "\e805"; 

} 

#sidebar-treeview #main-treeview .icon-docs::before { 

  content: "\e802"; 

} 

We have modified your sample based on this for your reference. You can check it below, 

Sample: https://codesandbox.io/s/vue-template-forked-echtg?file=/src/App.vue:23234-23709 

Please check the below link for details on our icons library for various icons. 

 

Icons: https://ej2.syncfusion.com/vue/documentation/appearance/icons/

Please get back to us if you need further assistance.  

Regards,  

Shalini M. 

[Lim Wee Beng]

Hi. 

I did change the \exxx based on the link below. But it is not working.

https://ej2.syncfusion.com/vue/documentation/appearance/icons/

For your  information, I am using iconCss and icon class for icon. The given link is using e-icon. So, what should I do if I am using   iconCss and icon class to change other icon type?

Thanks.

[Lim Wee Beng]

Hi. 

I did change the \exxx based on the link below. But it is not working.

https://ej2.syncfusion.com/vue/documentation/appearance/icons/

For your  information, I am using iconCss and icon class for icon. The given link is using e-icon. So, what should I do if I am using   iconCss and icon class to change other icon type?

Thanks.

[Lim Wee Beng]

Hi. 

I did change the \exxx based on the link below. But it is not working.

https://ej2.syncfusion.com/vue/documentation/appearance/icons/

For your  information, I am using iconCss and icon class for icon. The given link is using e-icon. So, what should I do if I am using   iconCss and icon class to change other icon type?

Thanks.

[Gokulraj Varatharajan]

Hi Lim, 

 

We are not able to replicate the reported issue at our end. We suspect that you have not installed the dependent packages in your application. Please run the following command in your project to add our dependent packages. 

 

npm install @syncfusion/ej2 

 

We have created a small project which includes a list of icons. You can download it from the links below and use it. 

 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/vue-icon-sample2070165568 

 

Please let us know if you have any queries. 

 

Regards, 

Gokul