Are you ready for Cyber ~~Monday~~ Week Deals?

Extra 25% off for all sale items + Free CoreUI Icons PRO with every order! Limited offer for the first 100 people, use code 2024BWCW25 during checkout.

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` ### Npm ```bash npm install @coreui/icons@3 npm install @coreui/[email protected] ``` --- ## Examples ### Single icon Import necessary icons only, directly to your component

--- ### All icons Not recommended, can drastically increase your bundle size.

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