Predefined Icons Library in Syncfusion Angular Component

31 Jan 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-o72bizwmyfmj5u8oss5asxx1mpuch1cw" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-o72bizwmyfmj5u8oss5asxx1mpuch1cw" 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-4x06ckxpmj9ytl448xjbde6vg5wehyhh" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons-size',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-4x06ckxpmj9ytl448xjbde6vg5wehyhh" 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-sydwlagnwzd7hbfmhdxj3y0kii83v7wu" onclick="LoadPreviewSample('https://helpej2.syncfusion.com/angular/documentation/samples/common/icons-customization',this.id);">Preview Sample</button><button class="stackblitz-button" id="StackBlitzButton-sydwlagnwzd7hbfmhdxj3y0kii83v7wu" 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