EJ Icon Package in Essential JavaScript

19 Oct 202224 minutes to read

The Essential Studio for JavaScript provides a set of icons that can be utilized in your application by applying the Unicode Content in element. To make it simple and standard, you have to create the custom icon class by defining the unicode content and refer that class with prefix of e-icon.

How to use EJ icons in your application?

Step 1:

To use the icon fonts in your application, you need to maintain the folder structure of the theme files and the corresponding images for icons.

You have to include the common-images folder in the specified theme folder for displaying icons and refer theme files in your application.

For example:

“default-theme” folder CSS which contains the “ej.widgets.all.min.css/ej.web.all.min.css” and “ej.theme.min.css” file. The “ej.widgets.core.min.css” file is in the outside of the default theme folder as shown below:

JavaScript Theme Folder

Theme files are available in the following location:

(Installed location)\Syncfusion\Essential Studio\24.2.3\JavaScript\assets\css\web\default-theme.

Step 2:

The following example showcases to display the EJ Icon by using their corresponding unicode content.

<!doctype html>
<html>
<head>
    <title>Essential Studio for JavaScript : EJ Icon Package</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" charset="utf-8"  />
    <link href="Content/ej/web/default-theme/ej.web.all.min.css" rel="stylesheet" />
</head>
<body>
  <div class="icons">
   <ul>
     <li>
       <div class="e-icon e-custom-search"></div>
     </li>
     <li>
       <div class="e-icon e-custom-settings"></div>
     </li>
     <li>
       <div class="e-icon e-custom-upload"></div>
     </li>
     <li>
       <div class="e-icon e-custom-font"></div>
     </li>
   </ul>
   <ul>
      <li>
        <div class="e-icon e-custom-indent"></div>
      </li>
      <li>
        <div class="e-icon e-custom-outdent"></div>
      </li>
      <li>
        <div class="e-icon e-custom-redo"></div>
      </li>
      <li>
        <div class="e-icon e-custom-undo"></div>
      </li>
     </ul>
  </div>
</body>
</html>
<style type="text/css" class="cssStyles">
   div.icons li
        {
            display: inline-block;
            vertical-align: middle;
            padding: 20px;
            list-style: none;
           
        }
    .e-custom-search:before{
    content: "\e82e"
    }

   .e-custom-settings:before{
    content: "\e644"
    }

   .e-custom-upload:before{
    content: "\e678"
    }

   .e-custom-font:before{
    content: "\e632"
    }

   .e-custom-indent:before{
   content: "\e603"
    }

  .e-custom-outdent:before{
     content: "\e604"
    }

   .e-custom-redo:before{
     content: "\e606"
    }
   .e-custom-undo:before{
     content: "\e607"
    }
</style>

NOTE

Make sure the CSS file (ej.widgets.all.min.css/ej.web.all.min.css) is referred in your application.

Execute the above code to render the following output.

JavaScript Output

Step 3:

The complete list of EJ icons are listed in the following table. You have to use the below Unicode content in your application.

Unicode:"e100"
Unicode:"e101"
Unicode:"e102"
Unicode:"e103"
Unicode:"e104"
Unicode:"e105"
Unicode:"e106"
Unicode:"e107"
Unicode:"e108"
Unicode:"e109"
Unicode:"e10a"
Unicode:"e10b"
Unicode:"e110"
Unicode:"e111"
Unicode:"e112"
Unicode:"e113"
Unicode:"e115"
Unicode:"e116"
Unicode:"e117"
Unicode:"e118"
Unicode:"e119"
Unicode:"e120"
Unicode:"e121"
Unicode:"e122"
Unicode:"e123"
Unicode:"e124"
Unicode:"e125"
Unicode:"e126"
Unicode:"e127"
Unicode:"e128"
Unicode:"e129"
Unicode:"e12a"
Unicode:"e12b"
Unicode:"e130"
Unicode:"e131"
Unicode:"e132"
Unicode:"e134"
Unicode:"e135"
Unicode:"e136"
Unicode:"e137"
Unicode:"e138"
Unicode:"e139"
Unicode:"e140"
Unicode:"e141"
Unicode:"e142"
Unicode:"e143"
Unicode:"e144"
Unicode:"e150"
Unicode:"e151"
Unicode:"e152"
Unicode:"e153"
Unicode:"e600"
Unicode:"e601"
Unicode:"e602"
Unicode:"e603"
Unicode:"e604"
Unicode:"e605"
Unicode:"e606"
Unicode:"e607"
Unicode:"e608"
Unicode:"e609"
Unicode:"e60a"
Unicode:"e60b"
Unicode:"e60c"
Unicode:"e60d"
Unicode:"e60e"
Unicode:"e60f"
Unicode:"e610"
Unicode:"e611"
Unicode:"e612"
Unicode:"e613"
Unicode:"e614"
Unicode:"e615"
Unicode:"e616"
Unicode:"e617"
Unicode:"e618"
Unicode:"e619"
Unicode:"e61a"
Unicode:"e61b"
Unicode:"e61c"
Unicode:"e61d"
Unicode:"e61e"
Unicode:"e61f"
Unicode:"e620"
Unicode:"e621"
Unicode:"e622"
Unicode:"e623"
Unicode:"e624"
Unicode:"e625"
Unicode:"e626"
Unicode:"e627"
Unicode:"e628"
Unicode:"e629"
Unicode:"e62a"
Unicode:"e62b"
Unicode:"e62c"
Unicode:"e62d"
Unicode:"e62e"
Unicode:"e62f"
Unicode:"e630"
Unicode:"e631"
Unicode:"e632"
Unicode:"e633"
Unicode:"e634"
Unicode:"e635"
Unicode:"e636"
Unicode:"e637"
Unicode:"e638"
Unicode:"e639"
Unicode:"e63a"
Unicode:"e63b"
Unicode:"e63c"
Unicode:"e63d"
Unicode:"e63e"
Unicode:"e63f"
Unicode:"e640"
Unicode:"e641"
Unicode:"e642"
Unicode:"e643"
Unicode:"e644"
Unicode:"e645"
Unicode:"e646"
Unicode:"e647"
Unicode:"e648"
Unicode:"e649"
Unicode:"e64a"
Unicode:"e64b"
Unicode:"e64c"
Unicode:"e64d"
Unicode:"e64e"
Unicode:"e64f"
Unicode:"e650"
Unicode:"e651"
Unicode:"e652"
Unicode:"e653"
Unicode:"e654"
Unicode:"e655"
Unicode:"e656"
Unicode:"e657"
Unicode:"e658"
Unicode:"e659"
Unicode:"e65a"
Unicode:"e65b"
Unicode:"e65c"
Unicode:"e65d"
Unicode:"e65e"
Unicode:"e65f"
Unicode:"e660"
Unicode:"e661"
Unicode:"e662"
Unicode:"e663"
Unicode:"e664"
Unicode:"e665"
Unicode:"e666"
Unicode:"e667"
Unicode:"e668"
Unicode:"e669"
Unicode:"e66a"
Unicode:"e66b"
Unicode:"e918"
Unicode:"e66c"
Unicode:"e66d"
Unicode:"e66e"
Unicode:"e66f"
Unicode:"e670"
Unicode:"e671"
Unicode:"e672"
Unicode:"e673"
Unicode:"e674"
Unicode:"e675"
Unicode:"e676"
Unicode:"e677"
Unicode:"e678"
Unicode:"e679"
Unicode:"e67a"
Unicode:"e67b"
Unicode:"e67c"
Unicode:"e67d"
Unicode:"e67e"
Unicode:"e67f"
Unicode:"e680"
Unicode:"e681"
Unicode:"e682"
Unicode:"e683"
Unicode:"e684"
Unicode:"e685"
Unicode:"e686"
Unicode:"e687"
Unicode:"e688"
Unicode:"e689"
Unicode:"e68a"
Unicode:"e68b"
Unicode:"e68c"
Unicode:"e68d"
Unicode:"e68e"
Unicode:"e68f"
Unicode:"e690"
Unicode:"e691"
Unicode:"e692"
Unicode:"e693"
Unicode:"e694"
Unicode:"e695"
Unicode:"e696"
Unicode:"e697"
Unicode:"e698"
Unicode:"e699"
Unicode:"e69a"
Unicode:"e69b"
Unicode:"e69c"
Unicode:"e69d"
Unicode:"e69e"
Unicode:"e69f"
Unicode:"e6a0"
Unicode:"e6a1"
Unicode:"e6a2"
Unicode:"e6a3"
Unicode:"e6a4"
Unicode:"e6a5"
Unicode:"e6a6"
Unicode:"e6a7"
Unicode:"e6a8"
Unicode:"e6a9"
Unicode:"e6aa"
Unicode:"e6ab"
Unicode:"e6ac"
Unicode:"e6ad"
Unicode:"e6ae"
Unicode:"e6af"
Unicode:"e6b0"
Unicode:"e6b1"
Unicode:"e6b2"
Unicode:"e6b3"
Unicode:"e6b4"
Unicode:"e6b5"
Unicode:"e6b6"
Unicode:"e6b7"
Unicode:"e6b8"
Unicode:"e6b9"
Unicode:"e6ba"
Unicode:"e6bb"
Unicode:"e6bc"
Unicode:"e6bd"
Unicode:"e6be"
Unicode:"e6bf"
Unicode:"e6c0"
Unicode:"e6c1"
Unicode:"e6c2"
Unicode:"e6c3"
Unicode:"e6c4"
Unicode:"e6c5"
Unicode:"e6c6"
Unicode:"e6c7"
Unicode:"e6c8"
Unicode:"e6c9"
Unicode:"e6ca"
Unicode:"e6cb"
Unicode:"e6cc"
Unicode:"e6cd"
Unicode:"e6ce"
Unicode:"e6cf"
Unicode:"e6d0"
Unicode:"e6d1"
Unicode:"e6d2"
Unicode:"e6d3"
Unicode:"e6d4"
Unicode:"e6d5"
Unicode:"e6d6"
Unicode:"e6d7"
Unicode:"e6d8"
Unicode:"e6d9"
Unicode:"e6da"
Unicode:"e6db"
Unicode:"e6dc"
Unicode:"e6dd"
Unicode:"e6de"
Unicode:"e6df"
Unicode:"e6e0"
Unicode:"e6e1"
Unicode:"e6e2"
Unicode:"e6e3"
Unicode:"e6e4"
Unicode:"e6e5"
Unicode:"e6e6"
Unicode:"e6e7"
Unicode:"e6e8"
Unicode:"e6e9"
Unicode:"e6ea"
Unicode:"e6eb"
Unicode:"e6ec"
Unicode:"e6ed"
Unicode:"e6ee"
Unicode:"e6ef"
Unicode:"e6f0"
Unicode:"e6f1"
Unicode:"e6f2"
Unicode:"e6f3"
Unicode:"e6f4"
Unicode:"e6f5"
Unicode:"e6f6"
Unicode:"e6f7"
Unicode:"e6f8"
Unicode:"e6f9"
Unicode:"e6fa"
Unicode:"e6fb"
Unicode:"e6fc"
Unicode:"e6fd"
Unicode:"e6fe"
Unicode:"e6ff"
Unicode:"e700"
Unicode:"e701"
Unicode:"e702"
Unicode:"e703"
Unicode:"e704"
Unicode:"e705"
Unicode:"e706"
Unicode:"e707"
Unicode:"e708"
Unicode:"e709"
Unicode:"e70a"
Unicode:"e70b"
Unicode:"e70c"
Unicode:"e70d"
Unicode:"e70e"
Unicode:"e70f"
Unicode:"e710"
Unicode:"e711"
Unicode:"e712"
Unicode:"e713"
Unicode:"e714"
Unicode:"e715"
Unicode:"e716"
Unicode:"e717"
Unicode:"e718"
Unicode:"e719"
Unicode:"e71a"
Unicode:"e71b"
Unicode:"e71c"
Unicode:"e71d"
Unicode:"e71e"
Unicode:"e71f"
Unicode:"e720"
Unicode:"e721"
Unicode:"e722"
Unicode:"e723"
Unicode:"e724"
Unicode:"e725"
Unicode:"e726"
Unicode:"e727"
Unicode:"e728"
Unicode:"e729"
Unicode:"e72a"
Unicode:"e72b"
Unicode:"e72c"
Unicode:"e72d"
Unicode:"e72e"
Unicode:"e72f"
Unicode:"e730"
Unicode:"e731"
Unicode:"e732"
Unicode:"e733"
Unicode:"e734"
Unicode:"e735"
Unicode:"e736"
Unicode:"e737"
Unicode:"e738"
Unicode:"e739"
Unicode:"e73a"
Unicode:"e73b"
Unicode:"e73c"
Unicode:"e73d"
Unicode:"e73e"
Unicode:"e73f"
Unicode:"e740"
Unicode:"e741"
Unicode:"e742"
Unicode:"e743"
Unicode:"e744"
Unicode:"e745"
Unicode:"e746"
Unicode:"e747"
Unicode:"e748"
Unicode:"e749"
Unicode:"e74a"
Unicode:"e74b"
Unicode:"e74c"
Unicode:"e74d"
Unicode:"e74e"
Unicode:"e74f"
Unicode:"e750"
Unicode:"e751"
Unicode:"e752"
Unicode:"e753"
Unicode:"e754"
Unicode:"e755"
Unicode:"e756"
Unicode:"e757"
Unicode:"e758"
Unicode:"e759"
Unicode:"e75a"
Unicode:"e75b"
Unicode:"e75c"
Unicode:"e75d"
Unicode:"e75e"
Unicode:"e75f"
Unicode:"e760"
Unicode:"e761"
Unicode:"e762"
Unicode:"e763"
Unicode:"e764"
Unicode:"e765"
Unicode:"e766"
Unicode:"e767"
Unicode:"e768"
Unicode:"e769"
Unicode:"e76a"
Unicode:"e76b"
Unicode:"e76c"
Unicode:"e76d"
Unicode:"e76e"
Unicode:"e76f"
Unicode:"e770"
Unicode:"e771"
Unicode:"e772"
Unicode:"e773"
Unicode:"e774"
Unicode:"e775"
Unicode:"e776"
Unicode:"e777"
Unicode:"e778"
Unicode:"e779"
Unicode:"e77a"
Unicode:"e77b"
Unicode:"e77c"
Unicode:"e77d"
Unicode:"e77e"
Unicode:"e77f"
Unicode:"e780"
Unicode:"e781"
Unicode:"e782"
Unicode:"e783"
Unicode:"e784"
Unicode:"e785"
Unicode:"e786"
Unicode:"e787"
Unicode:"e788"
Unicode:"e789"
Unicode:"e78a"
Unicode:"e78b"
Unicode:"e78c"
Unicode:"e78d"
Unicode:"e78e"
Unicode:"e78f"
Unicode:"e790"
Unicode:"e791"
Unicode:"e792"
Unicode:"e793"
Unicode:"e794"
Unicode:"e795"
Unicode:"e796"
Unicode:"e797"
Unicode:"e798"
Unicode:"e799"
Unicode:"e79a"
Unicode:"e79b"
Unicode:"e79c"
Unicode:"e79d"
Unicode:"e79e"
Unicode:"e79f"
Unicode:"e7a0"
Unicode:"e7a1"
Unicode:"e7a2"
Unicode:"e7a3"
Unicode:"e7a4"
Unicode:"e7a5"
Unicode:"e7a6"
Unicode:"e7a7"
Unicode:"e7a8"
Unicode:"e7a9"
Unicode:"e7aa"
Unicode:"e7ab"
Unicode:"e7ac"
Unicode:"e7ad"
Unicode:"e7ae"
Unicode:"e7af"
Unicode:"e7b0"
Unicode:"e7b1"
Unicode:"e7b2"
Unicode:"e7b3"
Unicode:"e7b4"
Unicode:"e7b5"
Unicode:"e7b6"
Unicode:"e7b7"
Unicode:"e7b8"
Unicode:"e7b9"
Unicode:"e7ba"
Unicode:"e7bb"
Unicode:"e7bc"
Unicode:"e7bd"
Unicode:"e7be"
Unicode:"e7bf"
Unicode:"e7c0"
Unicode:"e7c1"
Unicode:"e7c2"
Unicode:"e7c3"
Unicode:"e7c4"
Unicode:"e7c5"
Unicode:"e7c6"
Unicode:"e7c7"
Unicode:"e7c8"
Unicode:"e7c9"
Unicode:"e7ca"
Unicode:"e7cb"
Unicode:"e7cc"
Unicode:"e7cd"
Unicode:"e7ce"
Unicode:"e7cf"
Unicode:"e7d0"
Unicode:"e7d1"
Unicode:"e7d2"
Unicode:"e7d3"
Unicode:"e7d4"
Unicode:"e7d5"
Unicode:"e7d6"
Unicode:"e7d7"
Unicode:"e7d8"
Unicode:"e7d9"
Unicode:"e7da"
Unicode:"e7db"
Unicode:"e7dc"
Unicode:"e7dd"
Unicode:"e7de"
Unicode:"e7df"
Unicode:"e7e0"
Unicode:"e7e1"
Unicode:"e7e2"
Unicode:"e7e3"
Unicode:"e7e4"
Unicode:"e7e5"
Unicode:"e7e6"
Unicode:"e7e7"
Unicode:"e7e8"
Unicode:"e7e9"
Unicode:"e7ea"
Unicode:"e7eb"
Unicode:"e7ec"
Unicode:"e7ed"
Unicode:"e7ee"
Unicode:"e7ef"
Unicode:"e7f0"
Unicode:"e7f1"
Unicode:"e7f2"
Unicode:"e7f3"
Unicode:"e7f4"
Unicode:"e7f5"
Unicode:"e7f6"
Unicode:"e7f7"
Unicode:"e7f8"
Unicode:"e7f9"
Unicode:"e7fa"
Unicode:"e7fb"
Unicode:"e7fc"
Unicode:"e7fd"
Unicode:"e7fe"
Unicode:"e7ff"
Unicode:"e800"
Unicode:"e801"
Unicode:"e802"
Unicode:"e803"
Unicode:"e804"
Unicode:"e805"
Unicode:"e806"
Unicode:"e807"
Unicode:"e808"
Unicode:"e809"
Unicode:"e80a"
Unicode:"e80b"
Unicode:"e80c"
Unicode:"e80d"
Unicode:"e80e"
Unicode:"e80f"
Unicode:"e810"
Unicode:"e811"
Unicode:"e812"
Unicode:"e813"
Unicode:"e814"
Unicode:"e815"
Unicode:"e816"
Unicode:"e817"
Unicode:"e818"
Unicode:"e819"
Unicode:"e81a"
Unicode:"e81b"
Unicode:"e81c"
Unicode:"e81d"
Unicode:"e81e"
Unicode:"e81f"
Unicode:"e820"
Unicode:"e821"
Unicode:"e822"
Unicode:"e823"
Unicode:"e824"
Unicode:"e825"
Unicode:"e826"
Unicode:"e827"
Unicode:"e828"
Unicode:"e829"
Unicode:"e82a"
Unicode:"e82b"
Unicode:"e82c"
Unicode:"e82d"
Unicode:"e82e"
Unicode:"e82f"
Unicode:"e830"
Unicode:"e831"
Unicode:"e832"
Unicode:"e833"
Unicode:"e834"
Unicode:"e835"
Unicode:"e836"
Unicode:"e837"
Unicode:"e838"
Unicode:"e839"
Unicode:"e83a"
Unicode:"e83b"
Unicode:"e83c"
Unicode:"e83d"
Unicode:"e83e"
Unicode:"e83f"
Unicode:"e840"
Unicode:"e841"
Unicode:"e842"
Unicode:"e843"
Unicode:"e844"
Unicode:"e845"
Unicode:"e846"
Unicode:"e847"
Unicode:"e848"
Unicode:"e849"
Unicode:"e84a"
Unicode:"e84b"
Unicode:"e84c"
Unicode:"e84d"
Unicode:"e84e"
Unicode:"e84f"
Unicode:"e850"
Unicode:"e851"
Unicode:"e852"
Unicode:"e853"
Unicode:"e854"
Unicode:"e855"
Unicode:"e856"
Unicode:"e857"
Unicode:"e858"
Unicode:"e859"
Unicode:"e85a"
Unicode:"e85b"
Unicode:"e85c"
Unicode:"e85d"
Unicode:"e85e"
Unicode:"e85f"
Unicode:"e860"
Unicode:"e861"
Unicode:"e862"
Unicode:"e863"
Unicode:"e864"
Unicode:"e865"
Unicode:"e866"
Unicode:"e867"
Unicode:"e868"
Unicode:"e869"
Unicode:"e86a"
Unicode:"e86b"
Unicode:"e86c"
Unicode:"e86d"
Unicode:"e86e"
Unicode:"e86f"
Unicode:"e870"
Unicode:"e871"
Unicode:"e872"
Unicode:"e873"
Unicode:"e874"
Unicode:"e875"
Unicode:"e876"
Unicode:"e877"
Unicode:"e878"
Unicode:"e879"
Unicode:"e87a"
Unicode:"e87b"
Unicode:"e87c"
Unicode:"e87d"
Unicode:"e87e"
Unicode:"e87f"
Unicode:"e880"
Unicode:"e881"
Unicode:"e882"
Unicode:"e883"
Unicode:"e884"
Unicode:"e885"
Unicode:"e886"
Unicode:"e887"
Unicode:"e8d1"
Unicode:"e8d2"
Unicode:"e900"
Unicode:"e901"
Unicode:"e902"
Unicode:"e903"
Unicode:"e904"
Unicode:"e905"
Unicode:"e906"
Unicode:"e907"
Unicode:"e908"
Unicode:"e909"
Unicode:"e90a"
Unicode:"e90b"
Unicode:"e90c"
Unicode:"e90d"
Unicode:"e90e"
Unicode:"e90f"
Unicode:"e910"
Unicode:"e911"
Unicode:"e912"
Unicode:"e913"
Unicode:"e914"
Unicode:"e915"
Unicode:"e916"
Unicode:"e917"