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.Add the icon class with corresponding icon content from the available icons. For example, the below code snippet represents the search icon class.
.e-search:before{
content:'\e993';
}
Add 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.