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.setFamily('material', { className: 'material-icons', type: 'font' });
this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');

Constructors

Section titled "Constructors"

IgxIconService

new IgxIconService(): IgxIconService

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:68

Returns IgxIconService

Properties

Section titled "Properties"

iconLoaded

Section titled "iconLoaded"

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

 
iconLoaded: Observable<IgxIconLoadedEvent>

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:56

Example

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

defaultFamily

Section titled "defaultFamily" 
defaultFamily: IconFamily

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:94, projects/igniteui-angular/icon/src/icon/icon.service.ts:104

Methods

Section titled "Methods"

addIconRef

Section titled "addIconRef"

Adds an icon reference meta for an icon in a meta family. Executes only if no icon reference is found.

this.iconService.addIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' });
addIconRef(name: string, family: string, icon: IconMeta): void

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:178

Parameters

  • name: string
  • family: string
  • icon: IconMeta

Returns void

addSvgIcon

Section titled "addSvgIcon"

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

this.iconService.addSvgIcon('aruba', '/assets/svg/country_flags/aruba.svg', 'svg-flags');
addSvgIcon(name: string, url: string, family: string, stripMeta: boolean): void

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:261

Parameters

  • name: string
  • url: string
  • family: string
  • stripMeta: boolean

Returns void

addSvgIconFromText

Section titled "addSvgIconFromText"

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');
addSvgIconFromText(name: string, iconText: string, family: string, stripMeta: boolean): void

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:308

Parameters

  • name: string
  • iconText: string
  • family: string
  • stripMeta: boolean

Returns void

familyClassName

Section titled "familyClassName"

Returns the custom class, if any, associated to a given font-family.

const familyClass = this.iconService.familyClassName('material');
familyClassName(alias: string): string

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:131

Parameters

  • alias: string

Returns string

getIconRef

Section titled "getIconRef"

Returns the icon reference meta for an icon in a given family.

const iconRef = this.iconService.getIconRef('aruba', 'default');
getIconRef(name: string, family: string): IconReference

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:222

Parameters

  • name: string
  • family: string

Returns IconReference

getSvgIcon

Section titled "getSvgIcon"

Returns the cached SVG image as string.

const svgIcon = this.iconService.getSvgIcon('aruba', 'svg-flags');
getSvgIcon(name: string, family: string): SafeHtml

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:352

Parameters

  • name: string
  • family: string

Returns SafeHtml

isSvgIconCached

Section titled "isSvgIconCached"

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

const isSvgCached = this.iconService.isSvgIconCached('aruba', 'svg-flags');
isSvgIconCached(name: string, family: string): boolean

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:334

Parameters

  • name: string
  • family: string

Returns boolean

registerFamilyAlias

Section titled "registerFamilyAlias"

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

this.iconService.registerFamilyAlias('material', 'material-icons');
registerFamilyAlias(alias: string, className: string, type: IconType): this

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:116

Parameters

  • alias: string
  • className: string
  • type: IconType

Returns this

setFamily

Section titled "setFamily"

Creates a family to className relationship that is applied to the IgxIconComponent whenever that family name is used.

this.iconService.setFamily('material', { className: 'material-icons', type: 'liga' });
setFamily(name: string, meta: FamilyMeta): void

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:167

Parameters

Returns void

setIconRef

Section titled "setIconRef"

Similar to addIconRef, but always sets the icon reference meta for an icon in a meta family.

this.iconService.setIconRef('aruba', 'default', { name: 'aruba', family: 'svg-flags' });
setIconRef(name: string, family: string, icon: IconMeta): void

Defined in projects/igniteui-angular/icon/src/icon/icon.service.ts:201

Parameters

  • name: string
  • family: string
  • icon: IconMeta

Returns void