The Syncfusion React library provides the set of base64 formatted font icons, that can be utilized in the web application.
e-icons to the HTML element which needs to render the icon. This class contains the font-family and common property of font icons..e-search:before{
content:'\e993';
}e-icons and e-search class to the HTML element.<span class="e-icons e-search"></span>~index.html file.<link href="https://cdn.syncfusion.com/ej2/20.1.57/ej2-base/styles/material.css" rel="stylesheet" />The below code snippet represents the complete example of icon usage.
import * as React from 'react';
var icons = `
.e-search:before {
content:'\\e993';
}
.e-upload:before {
content: '\\e725';
}
.e-font:before {
content: '\\e34c';
}
`
export default class App extends React.Component<{}, {}> {
render() {
var iconList = ['e-search', 'e-upload', 'e-font'];
const listItems = iconList.map((icon, index) =>
<li><span className={`e-icons ${icon}`} key={index}></span></li>
);
return (
<div>
<style>{icons}</style>
<div className="icons">
<ul>
{listItems}
</ul>
</div>
</div>
);
}
}e-icons class.import * as React from 'react';
var icons = `
.e-icons {
color: #00ffff;
font-size: 26px;
}
.e-search:before {
content:'\\e993';
}
.e-upload:before {
content: '\\e725';
}
.e-font:before {
content: '\\e34c';
}
`
export default class App extends React.Component<{}, {}> {
render() {
var iconList = ['e-search', 'e-upload', 'e-font'];
const listItems = iconList.map((icon, index) =>
<li><span className={`e-icons ${icon}`} key={index}></span></li>
);
return (
<div>
<style>{icons}</style>
<div className="icons">
<ul>
{listItems}
</ul>
</div>
</div>
);
}
}The complete package of Essential JS 2 icons is listed in the following table. The corresponding icon content can be referred in the content section.