Almost all icons do not render

[Dave]

Hi,

I wanted to use the icons so I imported the material.css within my App.vue and started using the icons, but I recognize, that almost none of them are rendered:

For a quick test I got:

class="e-icons e-search"

class="e-icons e-recurrence"

class="e-icons e-add"

class="e-icons e-edit"

class="e-icons e-update"

class="e-icons e-excel-export"

class="e-icons e-filter"

class="e-icons e-remove"

class="e-icons e-zoom-in"

and only "recurrence", "add" and "excel-export" are rendered. What could be the issue?

[Jesus Arockia Sankaran S]

Hi Dave, 

Sorry for the inconvenience. 

We have prepared a sample for your reference that you can download from the link. 

Sample: https://www.syncfusion.com/downloads/support/forum/161988/ze/ej2-icons2109615160 

Documentation: https://ej2.syncfusion.com/vue/documentation/appearance/icons/#material 

Code Snippet:

 

<template> 

  <div id="app"> 

     <ul> 

                <li><span class="e-icons custom-search"></span></li> 

                <li><span class="e-icons custom-recurrence"></span></li> 

                <li><span class="e-icons custom-add"></span></li> 

                <li><span class="e-icons custom-update"></span></li> 

                <li><span class="e-icons custom-excel-export"></span></li> 

                 <li><span class="e-icons custom-filter"></span></li> 

                  <li><span class="e-icons custom-remove"></span></li> 

            </ul> 

  </div> 

</template> 

 

<script> 

export default { 

  name: 'App', 

} 

</script> 

 

<style> 

@import '../node_modules/@syncfusion/ej2-base/styles/material.css'; 

 

.custom-search:before{ 

    content:'\e993'; 

} 

.custom-recurrence:before{ 

    content:'\e308'; 

} 

.custom-add:before{ 

    content:'\e823'; 

} 

.custom-edit:before{ 

    content:'\e891'; 

} 

.custom-e-edit:before{ 

    content:'\e891'; 

} 

.custom-update:before{ 

    content:'\e60f'; 

} 

.custom-excel-export:before{ 

    content:'\e242'; 

} 

.custom-filter:before{ 

    content:'\ea77'; 

} 

.custom-remove:before{ 

    content:'\e33e'; 

} 

</style> 

 

Reference Image: 

 

Please get back to us if you have any queries. 

Regards, 

Jesus Arockia Sankaran S 

[Dave]

Alright, thanks for the help.

But why do I need to redefine the icons? Or why aren't all icons included? I do not want to add custom css styles to include the icons .. it just boils my style classes and I do not know all content of the icons. The cards in the documentation link are not interactive, so I can't get more information about them, like how to use, what's the content, etc..

Edit: I just saw the text under "PUA" is the content. So I can keep on working, thanks.

Edit2: I am missing a "share" icon like this in font-awesome "https://fontawesome.com/icons/share-alt?style=solid". Is it possible you add it?

Edit3: How would add a custom icon to a textbox? The textbox shows an icon, e.g. "e-recurrence", but the icon is very small. My custom icon is not rendered (only showing a question mark)

[Saranya Murugasamy]

Hi Dave, 

Sorry for the delayed response. 

We would like to let you know that, we have maintained the component level of icons only in our styles. Due to the over weightage of icons, we didn’t include the all icons. So we suggest you, to use the metro studio for the icons. In this metro studio, more than 7000+ icons are available. You can download and generate the icons from this. Please find the below link for more details. 

Documentation: https://help.syncfusion.com/metro-studio/overview 

Metro studio: https://www.syncfusion.com/downloads/metrostudio 

Please let us know if you have any concerns. 

Regards, 

Saranya M