The Syncfusion JavaScript 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>The below code snippet represents the complete example of icon usage.
<!doctype html>
<html>
<head>
<title>Essential JS 2 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<link href="./node_modules/@syncfusion/ej2/material.css" rel="stylesheet" />
<style>
.e-search:before{
content:'\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
</head>
<body>
<div class="icons">
<ul>
<li><span class="e-icons e-search"></span></li>
<li><span class="e-icons e-settings"></span></li>
<li><span class="e-icons e-upload"></span></li>
<li><span class="e-icons e-font"></span></li>
</ul>
</div>
</body>
</html>The Syncfusion’s icon library can be customize its color and size by overriding the e-icons class.
<!doctype html>
<html>
<head>
<title>Essential JS 2 </title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8" />
<link href="./node_modules/@syncfusion/ej2/material.css" rel="stylesheet" />
<style>
.e-icons{
color: #00ffff;
font-size: 26px;
}
.e-search:before{
content: '\e993';
}
.e-upload:before{
content: '\e725';
}
.e-font:before{
content: '\e34c';
}
</style>
</head>
<body>
<div class="icons">
<ul>
<li><span class="e-icons e-search"></span></li>
<li><span class="e-icons e-settings"></span></li>
<li><span class="e-icons e-upload"></span></li>
<li><span class="e-icons e-font"></span></li>
</ul>
</div>
</body>
</html>The complete pack of Syncfusion JavaScript icons are listed in the below table. The corresponding icon content can be referred in the content section.