Icons

[Steve]

Hi,

I'm having a hard time figuring out how the icons work?

I found this url:

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

And this example:

     https://ej2.syncfusion.com/react/documentation/document-editor/how-to/customize-tool-bar/

in the example, there is a reference to:

      prefixIcon: "e-de-ctnr-lock",

but how do I know what name to use? 

I want to show the "M_FormProperties"

[Suriya Murugan]

Hi Steve, 

 

For each icon, you have to specify Unicode content and You have to refer it from font url(style url). 

 

 

 

We have to add like below: 

 

.M_FormProperties:before{ 

    content:'\e993'; 

} 

 

 

In index.html file you have to refer below link: 

 

<link rel='nofollow' href="https://cdn.syncfusion.com/ej2/ej2-base/styles/material.css" rel="stylesheet" />

 

 

prefixIcon: "e-de-ctnr-lock", we internally defined this content in DocumentEditor. So, used directly. For custom icons you have to follow below steps. 

 

https://ej2.syncfusion.com/react/documentation/appearance/icons/#steps-to-use-icons-library  

Regards, 

 

Suriya M. 

 

[LAUREN HYACINTH]

https://www.syncfusion.com/forums/158041/iconsgeometry dash lite

These  icons is helpful for me. Thanks.

[Sujitha Siva]

Hi Lauren Hyacinth

Thanks for your update. Please let us know if you need any further assistance 

Regards,

Sujitha S

[Axel Blaze]

Really helpful explanation! Understanding how the Unicode + CSS approach works makes customizing icons much easier. Thanks for the clear breakdown — here’s a related resource I found useful as well: Corrupted Text Generator

[Sujitha Siva]

Hi Axel, 

Thank you for your update. If you have any further questions or need assistance, please don't hesitate to reach out. We're always here to help.

Regards,

Sujitha S

[blogcommentsieuviet]

These  icons is helpful for me. Thanks. luck8

[Sujitha Siva]

Hi 

Thanks for your update. Please let us know if you need any further assistance 

Regards,

Sujitha S

[Emma Roberts]

Without a more concrete example or a clearer breakdown of how the icons are supposed to work across components survival race, it’s difficult to understand what the intended behavior actually is

[Sujitha Siva]

Hi Emma,

As mentioned earlier, please refer to the following documentation to understand how icons work and verify this on your end:

Icons in React Appearance component | Syncfusion

If you need further clarification, kindly share your specific requirement and what you are trying to achieve, and we will review it and assist you further

Regards,

Sujitha S

[Joe Allen]

The icon naming system can definitely feel confusing at first. Usually, names like “e-de-ctnr-lock” come from predefined CSS icon classes in Syncfusion’s library. Checking the documentation or inspecting built-in components helps identify available icons. Understanding mappings is important in many systems, just like a wing ding translator converts symbols into readable meaning.

[Bros Basketball]

Which icons are you referring to—icons in a particular BasketBros , website, forum, or app? If you send me a screenshot, I can explain what each icon means.