@coreui/icons-angular NPM

CoreUI Icons Angular

`cIcon` directive

Angular directive for CoreUI Icons SVG set.

Features

Load icons:
- stored in Angular root service,
- directly passed SVG content,
Reduce icons bundle size when imported as single icons,
Full functionality of <svg> tag,
Clean API

For directive description visit https://coreui.io/angular/docs/

Installation

npm install @coreui/icons@3
npm install @coreui/icons-angular@5

Usage

// app NgModule

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

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

// app component

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

@Component({
  ...
})
export class AppComponent implements OnInit {
  constructor(public iconSet: IconSetService) {
    // iconSet singleton
    iconSet.icons = { cilEnvelopeOpen, ...flagSet };
  }
...

<svg cIcon name="cil-envelope-open" size="lg"></svg>
<svg cIcon name="cifAu"></svg>

API

Icon directive

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

Inputs

proprerty	type	default	description
`name`	string	undefined	name of SVG icon stored in IconSetService
`content`	string, string[]	undefined	SVG content
`size`	`custom`, `custom-size`, `sm`, `lg`, `xl`, `xxl`, `3xl`, `4xl`, `5xl`, `6xl`, `7xl`, `8xl`, `9xl`	''	Size of icon
`title`	string	undefined
`customClasses`	string	undefined	Overwrites default `.icon` classes
`viewBox`	string	undefined	SVG `viewbox`
`width`	string	undefined	SVG `width`
`height`	string	undefined	SVG `height`

IconSet service

Props

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

Support CoreUI Development

CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing. You can support development by buying the CoreUI PRO or by becoming a sponsor via Open Collective.