@progress/kendo-angular-icons
Version:
Kendo UI Angular component starter template
151 lines (148 loc) • 7.28 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 { Component, ElementRef, HostBinding, Input, isDevMode } from '@angular/core';
import { Subscription } from 'rxjs';
import { IconsService } from '../common/icons.service';
import { NgClass, NgIf } from '@angular/common';
import { IconComponent } from '../icon/icon.component';
import { SVGIconComponent } from '../svg-icon/svg-icon.component';
import * as i0 from "@angular/core";
import * as i1 from "../common/icons.service";
/**
* @hidden
*/
export 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: i1.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: i1.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
}] } });