@syncfusion/ej2-icons

ej2-icons

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

This is a commercial product and requires a paid license for possession or use. Syncfusion licensed software, including this component, is subject to the terms and conditions of Syncfusion EULA. To acquire a license, you can purchase or start a free 30-day trial.

A free community license is also available for companies and individuals whose organizations have less than $1 million USD in annual gross revenue and five or fewer developers.

Setup

To install ej2-icons, use the following command

npm install @syncfusion/ej2-icons

License

Check the license detail here.

Changelog

Check the changelog here

Steps to Add New Icons in the Icons Library

Prerequisites

1. Download the Metro Studio from https://www.syncfusion.com/downloads/metrostudio.

Add New Icons

1. Check out the repository from https://github.com/essential-studio/ej2-icons-library.

2. Add the new icons at the end of each theme shared by the UX team.

   Metrop file path: resources >> <theme> >> e-icons.metrop

   Folder structure: https://github.com/essential-studio/ej2-icons-library/tree/development/resources

   Note: Ensure the icon name and font name are in lowercase, separated by -. Also ensure the ASCII value is unique for every icon.

3. Open the e-icons.metrop file in Syncfusion Metro Studio and click Create Font in the bottom-right corner.

4. In the popup that opens, click Generate Font Icon at the bottom of the popup.

5. Browse to the specified path and click Export.

6. Once the icons are exported, the File Explorer opens at the specified path where the icons were generated.

7. Click Embed Font in CSS, copy the demo.html and style.css files, and replace them in the corresponding theme folder here: https://gitea.syncfusion.com/essential-studio/ej2-icons-library/src/branch/development/resources/bootstrap.

8. Ensure that the title attribute is added for every icon in the demo.html file.

9. Repeat the same steps for all themes.

Updating the Title for Icons for New Themes

1. Download the icons-library-title-update-program project from the Azure DevOps task attachment: Task #881439.
2. When newly adding icons for themes, copy and paste the icons library resources and styles folders into the following project directory: ConsoleApp\App_Data\html.
3. Add the newly added theme names to the list in the project's Program.cs (as highlighted in the task snippet).
4. Run the project — it will update the title changes.
5. The title-updated files will be available at: ConsoleApp\bin\Debug\netcoreapp3.1\App_Data\html.
6. Copy the styles and resources folders from the above directory and replace them in your local ej2-icons-library checkout.
7. Check the diff, ensure the titles are updated properly, and commit the changes.

Resolve glyf Warnings

Run the following command to resolve glyf warnings:

py -3 -m pip install fonttools; py -3 tools\fix_glyf_bbox.py