On this page
Angular Icons Component
Official Angular component for CoreUI Icons and CoreUI Icons PRO.
AngularcIcon directive forCoreUI 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
svgtag, - 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 supportsng 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
nameprop 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 ofname orcontent 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 | SVGviewBox |
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 Iconsare beautifully crafted symbols for common actions and items. You can use them in your digital products for web ormobile 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