On this page

Angular Icons Component

Official Angular component for CoreUI Icons and CoreUI Icons PRO.

Angular `cIcon` directive for [CoreUI Icons SVG set](https://coreui.io/icons/). ## 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.

```bash
ng add @coreui/icons-angular
```

#### Npm

```bash
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 1. Import IconSet Service on module level. For root module and/or other modules.

 ```typescript
// 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.

 ```typescript
// 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.

--- ## 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