Predefined Icons Library in Syncfusion® Angular Component

19 Aug 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, enabling a cohesive and visually appealing design across your entire application.

Referring Icons in Angular Applications

Icons can be easily incorporated into Angular applications using two primary methods:

The npm Package

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

To use icons from the ej2-icons npm package:

  1. Install the package using npm:
npm install @syncfusion/ej2-icons
  1. Import the desired theme CSS in your application styles:

[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.

Add the appropriate CDN link to your application’s HTML head section:

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

Steps to Use Icons Library

For new projects, create an Angular application using the Angular CLI:

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-zro3mfhphruqwjm167mtexwjkbq3hf3m" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/common/icons',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-zro3mfhphruqwjm167mtexwjkbq3hf3m" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/common/icons');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"/><span class="stackblitz-text">Open in Stackblitz</span></button>

Icon Size

The ej2-icons package allows displaying icons in various size modes. Choose the appropriate size class based on your design requirements:

  • e-small - Sets icon size to 8px (ideal for compact UI elements)
  • e-medium - Sets icon size to 16px (default size, suitable for most interfaces)

  • e-large - Sets icon size to 24px (for enhanced visibility or touch interfaces)

    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-k256p16gldpihq0jngpx5pytbatxup5a" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/common/icons-size',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-k256p16gldpihq0jngpx5pytbatxup5a" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/common/icons-size');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"/><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-1evgoeoj3h7cu3lxi8ygtb57xuadjw04" onclick="LoadPreviewSample('https://ej2.syncfusion.com/angular/documentation/samples/common/icons-customization',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-1evgoeoj3h7cu3lxi8ygtb57xuadjw04" onclick="OpenSampleInStackBlitz('https://ej2.syncfusion.com/angular/documentation/samples/common/icons-customization');"><img class="stackblitz-icon" src="https://cdn.syncfusion.com/documentation/images/StackBlitz-icon.png" alt="Stackblitz Support"/><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