CoreUI Icons for Angular

Explore CoreUI for Angular docs »

CoreUI Icons »

Report a bug · Request a feature · Blog

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
npm install @coreui/icons-angular

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.

Platinum Sponsors

Support this project by becoming a Platinum Sponsor. A large company logo will be added here with a link to your website.

Gold Sponsors

Support this project by becoming a Gold Sponsor. A big company logo will be added here with a link to your website.

Silver Sponsors

Support this project by becoming a Silver Sponsor. A medium company logo will be added here with a link to your website.

Bronze Sponsors

Support this project by becoming a Bronze Sponsor. The company avatar will show up here with a link to your OpenCollective Profile.

Backers

Thanks to all the backers and sponsors! Support this project by becoming a backer.

Copyright and license

Copyright 2022 creativeLabs Łukasz Holeczek. Code released under the MIT License. Docs released under Creative Commons.