core-logo

CoreUI Icons for Angular

Dedicated component used to implement CoreUI Icons SVG set in Angular.

On this page:



Features

  • Loads icons in three ways:
    • stored globally in Angular service,
    • directly passed SVG tag content,
    • source link to SVG file
  • Reduces icons bundle size when imported as single icons,
  • Full functionality of <svg> html tag,
  • Clean API

Installation

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

Usage

// app NgModule

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

@NgModule({
  imports: [
    IconModule,
    IconSetModule.forRoot(),
...
  providers: [IconSetService],
...
// app component

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

@Component({
  ...
  providers: [IconSetService],
  ...
})
export class AppComponent implements OnInit {
  constructor(public iconSet: IconSetService) {
    // iconSet singleton
    iconSet.icons = { cilEnvelopeOpen, ...flagSet };
  }
...
<c-icon name="cil-envelope-open" size="lg"></c-icon>
<c-icon name="cifAu"></c-icon>

API

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

proprerty type default description
name string undefined name of SVG icon stored in IconSetService
content string, string[] undefined SVG content
src string undefined Link to the icon. If defined, component will be rendered as <img> tag
size custom, custom-size, sm, lg, xl, 2xl, 3xl, 4xl, 5xl, 6xl, 7xl, 8xl, 9xl '’ Size of icon
title string undefined
use string undefined SVG <use>
customClasses string undefined Replaces default c-icon component classes
viewBox string undefined SVG viewbox
attributes any { role: 'img' } Object with additional html attributes
width undefined SVG width
height undefined SVG height