Class IgxIconService

Ignite UI for Angular Icon Service -

The Ignite UI Icon Service makes it easy for developers to include custom SVG images and use them with IgxIconComponent. In addition it could be used to associate a custom class to be applied on IgxIconComponent according to given font-family.

Example:

this.iconService.registerFamilyAlias('material', 'material-icons');
this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');

Constructors

Properties

iconLoaded: Observable<IgxIconLoadedEvent>

Observable that emits when an icon is successfully loaded through a HTTP request.

Example

this.service.iconLoaded.subscribe((ev: IgxIconLoadedEvent) => ...);

Accessors

Methods

  • Adds an SVG image to the cache. SVG source is an url.

      this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');
    

    Parameters

    • name: string
    • url: string
    • family: string = ...
    • stripMeta: boolean = false

    Returns void

  • Adds an SVG image to the cache. SVG source is its text.

      this.iconService.addSvgIconFromText('simple', '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200">
    <path d="M74 74h54v54H74" /></svg>', 'svg-flags');

    Parameters

    • name: string
    • iconText: string
    • family: string = ''
    • stripMeta: boolean = false

    Returns void

  • Returns whether a given SVG image is present in the cache.

      const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags');
    

    Parameters

    • name: string
    • family: string = ''

    Returns boolean

  • Registers a custom class to be applied to IgxIconComponent for a given font-family.

      this.iconService.registerFamilyAlias('material', 'material-icons');
    

    Parameters

    • alias: string
    • className: string = alias

    Returns this