Icons

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"


5 Replies 1 reply marked as answer

SM Suriya Murugan Syncfusion Team September 24, 2020 12:48 AM UTC

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. 
 
Regards, 
 
Suriya M. 
 


Marked as answer

LH LAUREN HYACINTH October 2, 2025 07:54 AM UTC

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

These  icons is helpful for me. Thanks.



SS Sujitha Siva Syncfusion Team October 6, 2025 04:34 PM UTC

Hi Lauren Hyacinth

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

Regards,

Sujitha S




AB Axel Blaze November 24, 2025 08:50 AM UTC

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




SS Sujitha Siva Syncfusion Team November 25, 2025 05:51 PM UTC

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



Loader.
Up arrow icon