@progress/kendo-angular-icons
Version:
Kendo UI Angular component starter template
752 lines (733 loc) • 30.1 kB
JavaScript
/**-----------------------------------------------------------------------------------------
* Copyright © 2025 Progress Software Corporation. All rights reserved.
* Licensed under commercial license. See LICENSE.md in the project root for more information
*-------------------------------------------------------------------------------------------*/
import * as i0 from '@angular/core';
import { Directive, HostBinding, Input, Component, isDevMode, ChangeDetectionStrategy, Injectable, InjectionToken, Optional, Inject, NgModule } from '@angular/core';
import { isDocumentAvailable, areObjectsEqual } from '@progress/kendo-angular-common';
import { validatePackage } from '@progress/kendo-licensing';
import * as i1 from '@angular/platform-browser';
import { NgIf, NgClass } from '@angular/common';
import { Subject, BehaviorSubject, Subscription } from 'rxjs';
import { map, tap } from 'rxjs/operators';
/**
* @hidden
*/
const packageMetadata = {
name: '@progress/kendo-angular-icons',
productName: 'Kendo UI for Angular',
productCode: 'KENDOUIANGULAR',
productCodes: ['KENDOUIANGULAR'],
publishDate: 1756992549,
version: '20.0.3',
licensingDocsUrl: 'https://www.telerik.com/kendo-angular-ui/my-license/'
};
const sizeClasses = {
'default': 'k-icon',
'xsmall': 'k-icon-xs',
'small': 'k-icon-sm',
'medium': 'k-icon-md',
'large': 'k-icon-lg',
'xlarge': 'k-icon-xl',
'xxlarge': 'k-icon-xxl',
'xxxlarge': 'k-icon-xxxl'
};
/**
* @hidden
*/
class IconBaseDirective {
element;
renderer;
get horizontalFlip() {
return this.flip === 'horizontal' || this.flip === 'both';
}
get verticalFlip() {
return this.flip === 'vertical' || this.flip === 'both';
}
/**
* Flips the icon horizontally, vertically, or in both directions.
*/
flip;
/**
* Sets the `IconThemeColor` for the icon. Use this property to apply a theme color.
*/
set themeColor(themeColor) {
const element = this.element.nativeElement;
if (this._themeColor) {
this.renderer.removeClass(element, `!k-color-${this._themeColor}`);
}
this._themeColor = themeColor;
// needed to ensure the theme color will be always applied; e.g. the class .k-button-icon, specific
// for icon buttons applies "color: inherit" which overwrites the theme color
if (themeColor) {
this.renderer.addClass(element, `!k-color-${themeColor}`);
}
}
get themeColor() {
return this._themeColor;
}
/**
* Sets the `IconSize` for the icon. Use this property to change the icon size.
*/
set size(size) {
const currentClass = sizeClasses[this.size];
const newClass = sizeClasses[size];
const element = this.element.nativeElement;
this.renderer.removeClass(element, currentClass);
if (size && size !== 'default') {
this.renderer.addClass(element, newClass);
}
this._size = size;
}
get size() {
return this._size;
}
_themeColor;
_size;
constructor(element, renderer) {
this.element = element;
this.renderer = renderer;
validatePackage(packageMetadata);
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseDirective, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Directive });
static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "16.2.12", type: IconBaseDirective, selector: "[kendoIconBase]", inputs: { flip: "flip", themeColor: "themeColor", size: "size" }, host: { properties: { "class.k-flip-h": "this.horizontalFlip", "class.k-flip-v": "this.verticalFlip" } }, ngImport: i0 });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconBaseDirective, decorators: [{
type: Directive,
args: [{
selector: '[kendoIconBase]'
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { horizontalFlip: [{
type: HostBinding,
args: ['class.k-flip-h']
}], verticalFlip: [{
type: HostBinding,
args: ['class.k-flip-v']
}], flip: [{
type: Input
}], themeColor: [{
type: Input
}], size: [{
type: Input
}] } });
/**
* Represents the [Kendo UI Icon component for Angular](slug:overview_icon).
* Used to display icons from the [Kendo UI Icons](slug:icon_list) collection.
*
* @example
* ```html
* <kendo-icon name="home"></kendo-icon>
* ```
*/
class IconComponent extends IconBaseDirective {
element;
renderer;
hostClass = true;
hostAriaHidden = true;
/**
* Sets the `Icon` to render. Supports all [Kendo UI Icons](slug:icon_list).
*/
set name(name) {
if (isDocumentAvailable()) {
const newName = name !== this._name;
if (newName) {
const element = this.element.nativeElement;
this.renderer.removeClass(element, `k-i-${this.name}`);
this.renderer.addClass(element, `k-i-${name}`);
}
}
this._name = name;
}
get name() {
return this._name;
}
_name;
constructor(element, renderer) {
super(element, renderer);
this.element = element;
this.renderer = renderer;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, deps: [{ token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconComponent, isStandalone: true, selector: "kendo-icon", inputs: { name: "name" }, host: { properties: { "class.k-icon": "this.hostClass", "class.k-font-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoIcon"], usesInheritance: true, ngImport: i0, template: '', isInline: true });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoIcon',
selector: 'kendo-icon',
template: '',
standalone: true
}]
}], ctorParameters: function () { return [{ type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-icon']
}, {
type: HostBinding,
args: ['class.k-font-icon']
}], hostAriaHidden: [{
type: HostBinding,
args: ['attr.aria-hidden']
}], name: [{
type: Input
}] } });
const areSame = (i1, i2) => i1?.name === i2?.name && i1.content === i2.content && i1.viewBox === i2.viewBox;
/**
* Represents the [Kendo UI SVG Icon component for Angular](slug:overview_svgicon).
* Used to display icons from the [Kendo UI SVG Icons](slug:svgicon_list) collection.
*
* @example
* ```ts
* import { KENDO_ICONS } from "@progress/kendo-angular-icons";
* import { paperclipIcon } from "@progress/kendo-svg-icons";
*
* @Component({
* selector: "my-app",
* imports: [KENDO_ICONS],
* template: `
* <kendo-svg-icon [icon]="paperclipIcon"></kendo-svg-icon>
* `,
* providers: [],
* })
* export class AppComponent {
* public paperclipIcon = paperclipIcon;
* }
* ```
*/
class SVGIconComponent extends IconBaseDirective {
domSanitizer;
element;
renderer;
hostClass = true;
hostAriaHidden = true;
/**
* Sets the `SVGIcon` to render. Supports all [Kendo UI SVG Icons](slug:svgicon_list).
*/
set icon(icon) {
const element = this.element.nativeElement;
const hasDocument = isDocumentAvailable();
const newName = icon?.name && icon.name !== this._icon?.name;
if (this._icon && this._icon.name && newName && hasDocument) {
this.renderer.removeClass(element, `k-svg-i-${this._icon.name}`);
}
if (!areSame(icon, this._icon)) {
this._icon = icon;
}
if (hasDocument && newName) {
this.renderer.addClass(element, `k-svg-i-${this._icon.name}`);
}
}
get icon() {
return this._icon;
}
get content() {
return this.domSanitizer.bypassSecurityTrustHtml(this.icon.content);
}
get visible() {
return this.icon && isDocumentAvailable();
}
_icon;
constructor(domSanitizer, element, renderer) {
super(element, renderer);
this.domSanitizer = domSanitizer;
this.element = element;
this.renderer = renderer;
}
ngOnInit() {
this.verifyIconProperty();
}
verifyIconProperty() {
if (!isDevMode()) {
return;
}
if (!this._icon) {
throw new Error(`
Invalid configuration.
The input [icon] is required for the Kendo UI SVG Icon component for Angular.
See https://www.telerik.com/kendo-angular-ui/components/icons/svg-icon
`);
}
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconComponent, deps: [{ token: i1.DomSanitizer }, { token: i0.ElementRef }, { token: i0.Renderer2 }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: SVGIconComponent, isStandalone: true, selector: "kendo-svg-icon, kendo-svgicon", inputs: { icon: "icon" }, host: { properties: { "class.k-svg-icon": "this.hostClass", "class.k-icon": "this.hostClass", "attr.aria-hidden": "this.hostAriaHidden" } }, exportAs: ["kendoSVGIcon"], usesInheritance: true, ngImport: i0, template: `
<svg [style.pointerEvents]="'none'" *ngIf="visible" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
[attr.viewBox]="icon.viewBox" [innerHTML]="content">
</svg>`, isInline: true, dependencies: [{ kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoSVGIcon',
selector: 'kendo-svg-icon, kendo-svgicon',
template: `
<svg [style.pointerEvents]="'none'" *ngIf="visible" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
[attr.viewBox]="icon.viewBox" [innerHTML]="content">
</svg>`,
changeDetection: ChangeDetectionStrategy.OnPush,
standalone: true,
imports: [NgIf]
}]
}], ctorParameters: function () { return [{ type: i1.DomSanitizer }, { type: i0.ElementRef }, { type: i0.Renderer2 }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-svg-icon']
}, {
type: HostBinding,
args: ['class.k-icon']
}], hostAriaHidden: [{
type: HostBinding,
args: ['attr.aria-hidden']
}], icon: [{
type: Input
}] } });
/**
* @hidden
*/
const isPresent = (value) => value !== null && value !== undefined;
/**
* Represents the service that manages icon settings.
* Use the `notify` method to update icon settings dynamically.
*
* @example
* ```typescript
* constructor(private iconSettingsService: IconSettingsService) {}
*
* this.iconSettingsService.notify({ themeColor: 'primary' });
* ```
*/
class IconSettingsService {
/**
* @hidden
*/
changes = new Subject();
/**
* Notifies subscribers about changes in the icon settings.
*
* @param iconSettings - (Optional) Sets a new value for the [icon settings token]({% slug api_icons_icon_settings %}).
* @example
* ```typescript
* iconSettingsService.notify({ size: 'large' });
* ```
*/
notify(iconSettings) {
this.changes.next(iconSettings);
}
/**
* Returns the [`SVGIcon`](slug:api_icons_svgicon) object for the provided key.
* Override in a custom service to provide custom SVG icons.
*
* @hidden
*/
getSvgIcon(_name) {
return null;
}
/**
* Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
* Override in a custom service to provide classes for custom font icons.
*
* @hidden
*/
getCustomFontIconClass(_key) {
return null;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconSettingsService, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconSettingsService });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconSettingsService, decorators: [{
type: Injectable
}] });
/**
* Represents the token for the `IconSettings` of Kendo UI for Angular components.
* Use this token to configure icon settings. ([See example.](slug:icon_settings#toc-icons-configuration))
*
* @example
* ```typescript
* import { NgModule } from '@angular/core';
*
* @NgModule({
* providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' } }]
* })
* export class AppModule {}
* ```
*/
const ICON_SETTINGS = new InjectionToken('Kendo UI Icon-Settings token');
const DEFAULT_ICON_SETTINGS = { type: 'svg' };
/**
* Represents the service that manages icon settings.
* Add this service to the `providers` array when you use it in a standalone component.
*
* @example
* ```typescript
* import { IconsService } from '@progress/kendo-angular-icons';
*
* @Component({
* selector: 'my-component',
* standalone: true,
* imports: [ ... ],
* providers: [IconsService, { provide: ICON_SETTINGS, useValue: { type: 'font' } }],
* template: `...`
* })
* export class AppComponent {}
* ```
*/
class IconsService {
_iconSettings;
iconSettingsService;
/**
* Notifies subscribers of the initial icon settings and on each call to `notify`.
* @hidden
*/
changes = new BehaviorSubject(this.iconSettings || DEFAULT_ICON_SETTINGS);
subs = new Subscription();
constructor(_iconSettings, iconSettingsService) {
this._iconSettings = _iconSettings;
this.iconSettingsService = iconSettingsService;
if (iconSettingsService) {
this.subs.add(iconSettingsService.changes
.pipe(map(iconSettings => isPresent(iconSettings) ? iconSettings : this._iconSettings), tap(iconSettings => this._iconSettings = iconSettings))
.subscribe(iconSettings => this.changes.next(iconSettings)));
}
if (isPresent(this.iconSettings) && !areObjectsEqual(this.iconSettings, DEFAULT_ICON_SETTINGS)) {
this.changes.next(this.iconSettings);
}
}
/**
* @hidden
*/
get iconSettings() {
return this._iconSettings;
}
ngOnDestroy() {
this.subs.unsubscribe();
}
/**
* Returns the [`SVGIcon`](slug:api_icons_svgicon) object for the provided key.
* Override in a custom service to provide custom SVG icons.
* @hidden
*/
getSvgIcon(name) {
const customIcon = this.iconSettingsService && this.iconSettingsService.getSvgIcon(name);
return customIcon;
}
/**
* Returns the list of classes to be rendered on the host `SPAN` element of custom font icons.
* Override in a custom service to provide classes for custom font icons.
* @hidden
*/
getCustomFontIconClass(key) {
const customClass = this.iconSettingsService && this.iconSettingsService.getCustomFontIconClass(key);
return customClass;
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsService, deps: [{ token: ICON_SETTINGS, optional: true }, { token: IconSettingsService, optional: true }], target: i0.ɵɵFactoryTarget.Injectable });
static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsService, providedIn: 'root' });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: function () { return [{ type: undefined, decorators: [{
type: Optional
}, {
type: Inject,
args: [ICON_SETTINGS]
}] }, { type: IconSettingsService, decorators: [{
type: Optional
}] }]; } });
/**
* @hidden
*/
class IconWrapperComponent {
iconsService;
element;
hostClass = true;
/**
* Sets the name for an existing font icon in a Kendo UI theme to render.
* Supports all [Kendo UI Icons](slug:icons#icons-list).
*/
name;
/**
* Sets the [SVGIcon](slug:api_icons_svgicon) to render.
*/
svgIcon;
/**
* Sets an additional class on the internal Icon component.
*/
innerCssClass = '';
/**
* Sets a custom font icon class using the API of the consuming component.
*/
customFontClass = '';
/**
* Sets the `IconSize` for the icon.
*/
size;
get customClasses() {
const classes = [this.customFontClass, this.innerCssClass, this.customFontIconClass].filter(cl => !!cl).join(' ');
return classes;
}
iconSettings;
get hasSvgIcon() {
this.svgIcon = this.iconsService.getSvgIcon(this.name) || this.svgIcon;
if (this.svgIcon) {
return true;
}
if (isDevMode()) {
console.groupCollapsed(`Kendo UI for Angular: Icon type is set to 'svg', but only font icon name is provided. The "${this.name}" font icon will be rendered instead.`);
console.warn(`
Starting from v7.0.0 (October, 2023) of the Kendo Themes, the font icons will be removed from the theme.
* To render an SVG icon, update the component configuration by setting the "svgIcon" input to the respective icon definition.
* To continue to use font icons, install the "@progress/kendo-font-icons" package and import "@progress/kendo-font-icons/dist/index.css".
Please note, that font icons are not compatible with a strict Content Security Policy and require the use of the "unsafe-inline" override.
For further details, check the following documentation articles:
https://www.telerik.com/kendo-angular-ui/components/icons/icon-settings
https://www.telerik.com/kendo-angular-ui/components/styling/icons/
https://www.telerik.com/kendo-angular-ui/components/styling/svg-icons/
https://www.telerik.com/design-system/docs/foundation/iconography/font-icons/
https://www.telerik.com/design-system/docs/foundation/iconography/icon-list/
`);
console.groupEnd();
}
return false;
}
get customFontIconClass() {
return this.iconsService.getCustomFontIconClass(this.name) || this.customFontClass;
}
subs = new Subscription();
constructor(iconsService, element) {
this.iconsService = iconsService;
this.element = element;
this.subs = iconsService.changes.subscribe(iconSettings => {
this.iconSettings = iconSettings;
});
}
ngOnDestroy() {
this.subs.unsubscribe();
}
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconWrapperComponent, deps: [{ token: IconsService }, { token: i0.ElementRef }], target: i0.ɵɵFactoryTarget.Component });
static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "16.2.12", type: IconWrapperComponent, isStandalone: true, selector: "kendo-icon-wrapper", inputs: { name: "name", svgIcon: "svgIcon", innerCssClass: "innerCssClass", customFontClass: "customFontClass", size: "size" }, host: { properties: { "class.k-icon-wrapper-host": "this.hostClass" } }, exportAs: ["kendoIconWrapper"], ngImport: i0, template: `
<kendo-svgicon
*ngIf="iconSettings?.type === 'svg' && hasSvgIcon; else font"
[ngClass]="innerCssClass"
[icon]="svgIcon"
[size]="size || iconSettings?.size"
[themeColor]="iconSettings?.themeColor"
[flip]="iconSettings?.flip"></kendo-svgicon>
<ng-template #font>
<kendo-icon
*ngIf="!customFontIconClass; else custom"
[ngClass]="innerCssClass"
[name]="name"
[size]="size || iconSettings?.size"
[themeColor]="iconSettings?.themeColor"
[flip]="iconSettings?.flip"></kendo-icon>
<ng-template #custom>
<span [ngClass]="customClasses"></span>
</ng-template>
</ng-template>
`, isInline: true, dependencies: [{ kind: "directive", type: NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: IconComponent, selector: "kendo-icon", inputs: ["name"], exportAs: ["kendoIcon"] }, { kind: "component", type: SVGIconComponent, selector: "kendo-svg-icon, kendo-svgicon", inputs: ["icon"], exportAs: ["kendoSVGIcon"] }] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconWrapperComponent, decorators: [{
type: Component,
args: [{
exportAs: 'kendoIconWrapper',
selector: 'kendo-icon-wrapper',
template: `
<kendo-svgicon
*ngIf="iconSettings?.type === 'svg' && hasSvgIcon; else font"
[ngClass]="innerCssClass"
[icon]="svgIcon"
[size]="size || iconSettings?.size"
[themeColor]="iconSettings?.themeColor"
[flip]="iconSettings?.flip"></kendo-svgicon>
<ng-template #font>
<kendo-icon
*ngIf="!customFontIconClass; else custom"
[ngClass]="innerCssClass"
[name]="name"
[size]="size || iconSettings?.size"
[themeColor]="iconSettings?.themeColor"
[flip]="iconSettings?.flip"></kendo-icon>
<ng-template #custom>
<span [ngClass]="customClasses"></span>
</ng-template>
</ng-template>
`,
standalone: true,
imports: [NgClass, NgIf, IconComponent, SVGIconComponent]
}]
}], ctorParameters: function () { return [{ type: IconsService }, { type: i0.ElementRef }]; }, propDecorators: { hostClass: [{
type: HostBinding,
args: ['class.k-icon-wrapper-host']
}], name: [{
type: Input
}], svgIcon: [{
type: Input
}], innerCssClass: [{
type: Input
}], customFontClass: [{
type: Input
}], size: [{
type: Input
}] } });
//IMPORTANT: NgModule export kept for backwards compatibility
/**
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the Icon component.
*
* @example
* ```typescript
* import { NgModule } from '@angular/core';
* import { IconModule } from '@progress/kendo-angular-icons';
* import { BrowserModule } from '@angular/platform-browser';
* import { AppComponent } from './app.component';
*
* @NgModule({
* declarations: [AppComponent],
* imports: [BrowserModule, IconModule],
* bootstrap: [AppComponent]
* })
* export class AppModule {}
* ```
*/
class IconModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IconModule, imports: [IconComponent], exports: [IconComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconModule, decorators: [{
type: NgModule,
args: [{
exports: [IconComponent],
imports: [IconComponent]
}]
}] });
//IMPORTANT: NgModule export kept for backwards compatibility
/**
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the SVG Icon component.
*
* @example
* ```typescript
* import { NgModule } from '@angular/core';
* import { SVGIconModule } from '@progress/kendo-angular-icons';
* import { BrowserModule } from '@angular/platform-browser';
* import { AppComponent } from './app.component';
*
* @NgModule({
* declarations: [AppComponent],
* imports: [BrowserModule, SVGIconModule],
* bootstrap: [AppComponent]
* })
* export class AppModule {}
* ```
*/
class SVGIconModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule, imports: [SVGIconComponent], exports: [SVGIconComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: SVGIconModule, decorators: [{
type: NgModule,
args: [{
exports: [SVGIconComponent],
imports: [SVGIconComponent]
}]
}] });
/**
* Represents the utility array that contains all `KendoIcon`-related components and directives.
*
* @example
* ```typescript
* import { Component } from '@angular/core';
* import { KENDO_ICON } from '@progress/kendo-angular-icons';
*
* @Component({
* selector: 'my-app',
* standalone: true,
* imports: [KENDO_ICON],
* template: `...`,
* })
* export class AppComponent {}
* ```
*/
const KENDO_ICON = [
IconComponent
];
/**
* Represents the utility array that contains all `KendoSVGIcon`-related components and directives.
*
* @example
* ```typescript
* import { Component } from '@angular/core';
* import { KENDO_SVGICON } from '@progress/kendo-angular-icons';
*
* @Component({
* selector: 'my-app',
* standalone: true,
* imports: [KENDO_SVGICON],
* template: `...`,
* })
* export class AppComponent {}
* ```
*/
const KENDO_SVGICON = [
SVGIconComponent
];
/**
* Represents the utility array that contains all `@progress/kendo-angular-icons`-related components and directives.
*
* @example
* ```typescript
* import { Component, ViewEncapsulation } from '@angular/core';
* import { KENDO_ICONS } from '@progress/kendo-angular-icons';
*
* @Component({
* selector: 'my-app',
* standalone: true,
* imports: [KENDO_ICONS],
* template: `...`,
* })
* export class AppComponent {}
* ```
*/
const KENDO_ICONS = [
...KENDO_ICON,
...KENDO_SVGICON
];
//IMPORTANT: NgModule export kept for backwards compatibility
/**
* Represents the [`NgModule`](link:site.data.urls.angular['ngmoduleapi']) definition for the Icons components.
*
* @example
* ```typescript
* import { NgModule } from '@angular/core';
* import { IconsModule } from '@progress/kendo-angular-icons';
* import { BrowserModule } from '@angular/platform-browser';
* import { AppComponent } from './app.component';
*
* @NgModule({
* declarations: [AppComponent],
* imports: [BrowserModule, IconsModule],
* bootstrap: [AppComponent]
* })
* export class AppModule {}
* ```
*/
class IconsModule {
static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
static ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, imports: [IconComponent, SVGIconComponent], exports: [IconComponent, SVGIconComponent] });
static ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, providers: [IconsService] });
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "16.2.12", ngImport: i0, type: IconsModule, decorators: [{
type: NgModule,
args: [{
imports: [
...KENDO_ICONS
],
exports: [
...KENDO_ICONS
],
providers: [IconsService]
}]
}] });
/**
* Generated bundle index. Do not edit.
*/
export { ICON_SETTINGS, IconComponent, IconModule, IconSettingsService, IconWrapperComponent, IconsModule, IconsService, KENDO_ICON, KENDO_ICONS, KENDO_SVGICON, SVGIconComponent, SVGIconModule };