Angular Icons Component

Angular cIcon directive for CoreUI Icons SVG set.

Features

• Loading icons:
• store icons by name in Angular root service,
• directly pass SVG content,
• Reduces icons bundle size when imported as single icons,
• Full functionality of svg tag,
• Lean API

Installation

If you want to use our icon directive with CoreUI Icons library you have to install two additional packages.

• CoreUI Icons library @coreui/icons
• CoreUI Angular Icon component @coreui/icons-angular

CoreUI v5.x Icons for Angular supports ng add to install all required dependencies for your Angular project.

ng add @coreui/icons-angular

Npm

npm install @coreui/icons@3 @coreui/icons-angular@~5.7

Examples

Single icon

Import necessary icons only, directly to your component

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

import { cilList, cilShieldAlt } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';

@Component({
  selector: 'docs-icons-single',
  templateUrl: './icons-single.component.html',
  imports: [IconDirective]
})
export class IconsSingleComponent {
  icons = { cilList, cilShieldAlt };
}

<svg [cIcon]="icons.cilList" size="xl" title="List Icon"></svg>
<svg [cIcon]="icons.cilShieldAlt" width="25" title="Shield Icon"></svg>

All icons

Not recommended, can drastically increase your bundle size.

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

import { freeSet } from '@coreui/icons';
import { IconDirective } from '@coreui/icons-angular';

@Component({
  selector: 'docs-icons-all',
  templateUrl: './icons-all.component.html',
  imports: [IconDirective]
})
export class IconsAllComponent {
  icons = freeSet;
}

<svg [cIcon]="icons.cilList" size="xl" title="List Icon"></svg>
<svg [cIcon]="icons.cilShieldAlt" size="xl" title="Shield Icon"></svg>

Usage

IconSet Service

1. Import IconSet Service on module level. For root module and/or other modules.

// app NgModule (excerpt)

import { IconModule, IconSetService } from '@coreui/icons-angular';

@NgModule({
  imports: [
    IconModule,
...
  providers: [
    IconSetService
...

Import required icons

2. Upload required icons into IconSet Service on app component.

// app component (excerpt)

import { IconSetService } from '@coreui/icons-angular';
import { cilListNumbered, cilPaperPlane, brandSet } from '@coreui/icons';

@Component({...})
export class AppComponent {
  constructor(
    public iconSet: IconSetService
  ) {
    iconSet.icons = { cilListNumbered, cilPaperPlane, ...brandSet };
  }
...

Use icons

3. Use icons by name prop anywhere in your Angular application.

import { Component, inject } from '@angular/core';
import { IconDirective, IconSetService } from '@coreui/icons-angular';
import { cilListNumbered, cilPaperPlane } from '@coreui/icons';

@Component({
  selector: 'docs-icons',
  templateUrl: './icons.component.html',
  imports: [IconDirective],
  providers: [IconSetService]
})
export class IconsComponent {
  readonly iconSet = inject(IconSetService);
  constructor() {
    this.iconSet.icons = {
      cilListNumbered,
      cilPaperPlane
    };
  }
}

<svg cIcon name="cilListNumbered" size="xl" title="Numbered List Icon"></svg>
<svg cIcon name="cilPaperPlane" size="xl" title="Paper Plane Icon"></svg>

API

Use one of name or content prop as it defines the way of icon import

cIcon

directive

import { IconDirective } from '@coreui/icons-angular'

IconSet

service

Props

Available icons

CoreUI Icons package is delivered with more than 1500 icons in multiple formats SVG, PNG, and Webfonts. CoreUI Icons are beautifully crafted symbols for common actions and items. You can use them in your digital products for web or mobile app.