Search results

Icons Library

18 Oct 2021 / 2 minutes to read

The Syncfusion Essential JS 2 provides the set of base64 formatted font icons, that can be utilized in the web application.

Steps to Use Icon

  1. Add a class e-icons to the HTML element that shows the icon. This class contains the font-family and common property of the font icons.
  2. Add the icon class with corresponding icon content from the available icons. For example, the below code snippet represents the search icon class.
Copied to clipboard
.e-search:before{
    content:'\e993';
}
  1. Add e-icons and e-search class to the HTML element.
Copied to clipboard
<span class="e-icons e-search"></span>

The below code snippet represents the complete example of icon usage.

Copied to clipboard
<!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>

Customization

The Essential JS 2 icon library can be customize icon color, size by overriding the e-icons class.

Copied to clipboard
<!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>

Available Icons

The complete pack of Essential JS 2 icons are listed in the following table. The corresponding icon content can be referred in the content section

Material

Fabric

Bootstrap

Bootstrap 4

Bootstrap 5

High Contrast

Tailwind CSS