On this page

Angular Icons Component

Official Angular component for CoreUI Icons and CoreUI Icons PRO.

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/[email protected]

Examples

Single icon

Import necessary icons only, directly to your component

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

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

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

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

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-icons02',
  templateUrl: './icons02.component.html',
  standalone: true,
  imports: [IconDirective]
})
export class Icons02Component {
  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

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

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

Use icons by name prop anywhere in your Angular application.

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

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

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

API

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

cIcon

directive

Inputs

property	type	default	description
`[cIcon]` `content`	`string`, `string[viewBox, content]`	undefined	SVG content
`name`	`string`	undefined	name of SVG icon stored in IconSetService
`size`	`custom \| custom-size` \| `sm` \| `lg` \| `xl` \| `2xl` \| `3xl` \| `4xl` \| `5xl` \| `6xl` \|`7xl` \| `8xl` \| `9xl`	''	Size of icon
`title`	`string`	undefined	svg title tag
`customClasses`	`string`	undefined	Overwrites default `.icon` classes
`viewBox`	`string`	undefined	SVG `viewBox`

IconSet

service

Props

property	type	default	description
`getIcon()`	`(string): any[]`		returns an icon
`icons`	`IIconSet`	undefined	IconSet object
`iconNames`	`[key: string]: string`	undefined	returns icon name from key

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.

cil3d

cil4k

cil-account-logout

cil-action-redo

cil-action-undo

cil-address-book

cil-airplane-mode

cil-airplane-mode-off

cil-airplay

cil-alarm

cil-album

cil-align-center

cil-align-left

cil-align-right

cil-american-football

cil-animal

cil-aperture

cil-apple

cil-applications

cil-applications-settings

cil-apps

cil-apps-settings

cil-arrow-bottom

cil-arrow-circle-bottom

cil-arrow-circle-left

cil-arrow-circle-right

cil-arrow-circle-top

cil-arrow-left

cil-arrow-right

cil-arrow-thick-bottom

cil-arrow-thick-from-bottom

cil-arrow-thick-from-left

cil-arrow-thick-from-right

cil-arrow-thick-from-top

cil-arrow-thick-left

cil-arrow-thick-right

cil-arrow-thick-to-bottom

cil-arrow-thick-to-left

cil-arrow-thick-to-right

cil-arrow-thick-to-top

cil-arrow-thick-top

cil-arrow-top

cil-assistive-listening-system

cil-asterisk