The Syncfusion JavaScript (ES5) library provides the set of base64
formatted font icons, that can be utilized in the web application.
e-icons
to the HTML element that shows the icon. This class contains the font-family and common property of the 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 JavaScript icon library can be customize its color, size by overriding the e-icons
class.
```html
<!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 (Essential JS 2) icons are listed in the below table. The corresponding icon content can be referred in the content section.