Predefined Icons Library in Syncfusion® Angular Component

5 Apr 20257 minutes to read

Syncfusion® offers a versatile icon library consisting of pre-designed icons to enhance application interfaces. These icons are provided as base64 formatted font icons, allowing for a cohesive, visually appealing application design.

Referring Icons in Angular Applications

Icons can be easily incorporated into Angular applications using the following methods:

The npm Package

Syncfusion® theme icons are included in the ej2-icons package, available on npmjs.com. This package provides CSS and SCSS theme files for all themes.

To use icons from the ej2-icons npm package, install it with the command:

 npm install @syncfusion/ej2-icons

In your Angular application, use the following syntax to reference icons:

[src/styles.css]

@import "../node_modules/@syncfusion/ej2-icons/styles/<theme_name>.css";

Example:

@import "../node_modules/@syncfusion/ej2-icons/styles/material.css";

CDN Reference

Syncfusion® theme icons are also accessible via CDN. Using a cloud CDN instead of local resources helps ensure current and compatible icon versions align with Syncfusion® Angular packages.

To utilize icons via CDN, link the appropriate URLs in your application’s HTML head section. Ensure version compatibility to avoid conflicts.

// Bootstrap5
<head>
    <link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet"/>
</head>
// Material
<head>
    <link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/material.css" rel="stylesheet"/>
</head>

Steps to Use Icons Library

Create an Angular application using the following command:

For introductory and configuration guidance, refer to getting started with the Syncfusion® Angular application.

Using Icons Directly in HTML Elements

Render Syncfusion® icons directly in HTML by assigning the e-icons class, encompassing the font-family and shared properties, and including the desired icon class prefixed with e-.

Here’s how to implement direct icon rendering:

  1. Assign e-icons to the element you wish to render.

  2. Utilize the specific icon class with the desired content. E.g., for the paste icon:

     .e-paste:before{
     content:'\e355';
 }

  3. Add e-icons and e-paste classes to the HTML element.

     <span class="e-icons e-paste"></span>

  4. In ~index.html, link the icons library CDN.

     <link href="https://cdn.syncfusion.com/ej2/ej2-icons/styles/bootstrap5.css" rel="stylesheet" />

    Complete implementation example:

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild } from '@angular/core';

@Component({
standalone: true,
  selector: 'app-root',
  template: `
    <div class="icon-bar">
      <span class="e-icons e-cut"></span>
      <span class="e-icons e-copy"></span>
      <span class="e-icons e-paste"></span>
    </div>
  `
})

export class AppComponent {
  
}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<button class="preview-sample-button" id="PreviewSampleButton-uomjjx3b64pr39citsittq7vcybjuoy6" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-uomjjx3b64pr39citsittq7vcybjuoy6" onclick="OpenSampleInStackBlitz('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png"/><span class="stackblitz-text">Open in Stackblitz</span></button>

Icon Size

The ej2-icons package allows displaying icons in various size modes. Depending on interaction mode (touch or mouse), use e-large, e-medium, or e-small for appropriate sizing:

  • e-small - Sets size to 8px.
  • e-medium - Sets size to 16px.

  • e-large - Sets size to 24px.

    Example:

      <span class="e-icons e-small e-search"></span>
  <span class="e-icons e-medium e-search"></span>
  <span class="e-icons e-large e-search"></span>
import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({

standalone: true,
  selector: 'app-root',
  template: `
    <div>
      <p><b>Smaller Icons</b></p>
      <div class="small-icon-bar">
        <span class="e-icons e-small e-cut"></span>
        <span class="e-icons e-small e-copy"></span>
        <span class="e-icons e-small e-paste"></span>
      </div>
      <p><b>Medium Icons</b></p>
      <div class="medium-icon-bar">
        <span class="e-icons e-medium e-cut"></span>
        <span class="e-icons e-medium e-copy"></span>
        <span class="e-icons e-medium e-paste"></span>
      </div>
      <p><b>Larger Icons</b></p>
      <div class="large-icon-bar">
        <span class="e-icons e-large e-cut"></span>
        <span class="e-icons e-large e-copy"></span>
        <span class="e-icons e-large e-paste"></span>
      </div>
    </div>
  `
})

export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<button class="preview-sample-button" id="PreviewSampleButton-880x0pkqf35xb1sepuv6au9mvgjhhnth" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons-size',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-880x0pkqf35xb1sepuv6au9mvgjhhnth" onclick="OpenSampleInStackBlitz('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons-size');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png"/><span class="stackblitz-text">Open in Stackblitz</span></button>

Icon Appearance Customization

Customize Syncfusion® Angular icons for color and size by modifying the e-icons class. Tailoring icons can enhance visual appeal and adapt them to match your application’s design. Changes like color adjustment to fit a theme, or resizing for better visibility improve the user experience.

import { NgModule } from '@angular/core'
import { BrowserModule } from '@angular/platform-browser'




import { Component, ViewChild } from '@angular/core';
import { Animation } from '@syncfusion/ej2-base';

@Component({

standalone: true,
  selector: 'app-root',
  template: `
    <div class="icon-bar">
      <span class="e-icons e-cut"></span>
      <span class="e-icons e-copy"></span>
      <span class="e-icons e-paste"></span>
    </div>
  `
})

export class AppComponent {

}
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import 'zone.js';
bootstrapApplication(AppComponent).catch((err) => console.error(err));
<button class="preview-sample-button" id="PreviewSampleButton-2us6fab1hno8120lqzawuabni6fdbqmf" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons-customization',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-2us6fab1hno8120lqzawuabni6fdbqmf" onclick="OpenSampleInStackBlitz('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons-customization');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png"/><span class="stackblitz-text">Open in Stackblitz</span></button>

Available Icons

Browse the full Essential® JS 2 icon package below. Icon content references are available in respective content sections.

Material 3

Bootstrap 5

Bootstrap 4

Bootstrap

Material

Tailwind CSS

Tailwind 3.4

Office Fabric

High Contrast

Fluent 2

Fluent