EJ Icon Package

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:

Theme files are available in the following location:

(Installed location)\Syncfusion\Essential Studio\17.3.0.9\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.

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"