@progress/kendo-angular-icons 19.1.1-develop.2 → 19.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -16,41 +16,16 @@ export declare abstract class IconBaseDirective {
16
16
  get horizontalFlip(): boolean;
17
17
  get verticalFlip(): boolean;
18
18
  /**
19
- * Flips the icon horizontally, vertically or in both directions.
19
+ * Flips the icon horizontally, vertically, or in both directions.
20
20
  */
21
21
  flip: IconFlip;
22
22
  /**
23
- * Specifies the theme color for the Icon.
24
- *
25
- * The possible values are:
26
- * * `inherit` (Default)—Applies coloring based on the current color.
27
- * * `primary` —Applies coloring based on primary theme color.
28
- * * `secondary`—Applies coloring based on secondary theme color.
29
- * * `tertiary`— Applies coloring based on tertiary theme color.
30
- * * `info`—Applies coloring based on info theme color.
31
- * * `success`— Applies coloring based on success theme color.
32
- * * `warning`— Applies coloring based on warning theme color.
33
- * * `error`— Applies coloring based on error theme color.
34
- * * `dark`— Applies coloring based on dark theme color.
35
- * * `light`— Applies coloring based on light theme color.
36
- * * `inverse`— Applies coloring based on inverse theme color.
37
- *
23
+ * Sets the `IconThemeColor` for the icon. Use this property to apply a theme color.
38
24
  */
39
25
  set themeColor(themeColor: IconThemeColor);
40
26
  get themeColor(): IconThemeColor;
41
27
  /**
42
- * Specifies the size of the Icon.
43
- *
44
- * The possible values are:
45
- * * `default` (Default) (Font-size: 16px; Width: 16px; Height: 16px)
46
- * * `xsmall` (Font-size: 12px; Width: 12px; Height: 12px;)
47
- * * `small` (Font-size: 14px; Width: 14px; Height: 14px;)
48
- * * `medium` (Font-size: 16px; Width: 16px; Height: 16px;)
49
- * * `large` (Font-size: 20px; Width: 20px; Height: 20px;)
50
- * * `xlarge` (Font-size: 24px; Width: 24px; Height: 24px;)
51
- * * `xxlarge` (Font-size: 32px; Width: 32px; Height: 32px;)
52
- * * `xxxlarge` (Font-size: 48px; Width: 48px; Height: 48px;)
53
- *
28
+ * Sets the `IconSize` for the icon. Use this property to change the icon size.
54
29
  */
55
30
  set size(size: IconSize);
56
31
  get size(): IconSize;
@@ -5,17 +5,17 @@
5
5
  import { InjectionToken } from '@angular/core';
6
6
  import { IconSettings } from './models';
7
7
  /**
8
- * A token that specifies the [IconSettings](slug:api_icons_iconsettings) of the Kendo UI for Angular components ([see example](slug:icon_settings#toc-icons-configuration)).
8
+ * Represents the token for the `IconSettings` of Kendo UI for Angular components.
9
+ * Use this token to configure icon settings. ([See example.](slug:icon_settings#toc-icons-configuration))
9
10
  *
10
- * ```ts
11
+ * @example
12
+ * ```typescript
11
13
  * import { NgModule } from '@angular/core';
12
14
  *
13
15
  * @NgModule({
14
- * ...
15
- * providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' }}]
16
+ * providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' } }]
16
17
  * })
17
18
  * export class AppModule {}
18
19
  * ```
19
- *
20
20
  */
21
21
  export declare const ICON_SETTINGS: InjectionToken<IconSettings>;
@@ -7,8 +7,15 @@ import { IconSettings } from './models';
7
7
  import { SVGIcon } from '@progress/kendo-svg-icons';
8
8
  import * as i0 from "@angular/core";
9
9
  /**
10
- * A service that returns the current icon settings to be used in subscribers.
11
- * Use the public `notify` method to change the icon settings dynamically.
10
+ * Represents the service that manages icon settings.
11
+ * Use the `notify` method to update icon settings dynamically.
12
+ *
13
+ * @example
14
+ * ```typescript
15
+ * constructor(private iconSettingsService: IconSettingsService) {}
16
+ *
17
+ * this.iconSettingsService.notify({ themeColor: 'primary' });
18
+ * ```
12
19
  */
13
20
  export declare class IconSettingsService {
14
21
  /**
@@ -16,9 +23,13 @@ export declare class IconSettingsService {
16
23
  */
17
24
  readonly changes: Subject<IconSettings>;
18
25
  /**
19
- * Notifies subscribers that the icon settings were changed.
26
+ * Notifies subscribers about changes in the icon settings.
20
27
  *
21
- * @param iconSettings - (Optional) A new value for the [icon settings token]({% slug api_icons_icon_settings %}).
28
+ * @param iconSettings - (Optional) Sets a new value for the [icon settings token]({% slug api_icons_icon_settings %}).
29
+ * @example
30
+ * ```typescript
31
+ * iconSettingsService.notify({ size: 'large' });
32
+ * ```
22
33
  */
23
34
  notify(iconSettings?: IconSettings): void;
24
35
  /**
@@ -9,21 +9,19 @@ import { IconSettingsService } from './icon-settings.service';
9
9
  import { SVGIcon } from '@progress/kendo-svg-icons';
10
10
  import * as i0 from "@angular/core";
11
11
  /**
12
- * The service responsible for handling changes in the icons settings. Should be included in the providers array when implementing the functionality in a standalone component.
12
+ * Represents the service that manages icon settings.
13
+ * Add this service to the `providers` array when you use it in a standalone component.
13
14
  *
14
15
  * @example
15
- *
16
- * ```ts-no-run
17
- * // Import the IconsService
16
+ * ```typescript
18
17
  * import { IconsService } from '@progress/kendo-angular-icons';
19
18
  *
20
- * // Define a standalone component
21
19
  * @Component({
22
- * selector: my-component,
23
- * standalone: true,
24
- * imports: [ ... ],
25
- * providers: [IconsService, { provide: ICON_SETTINGS , useValue: { type: 'font' } }],
26
- * template: ...
20
+ * selector: 'my-component',
21
+ * standalone: true,
22
+ * imports: [ ... ],
23
+ * providers: [IconsService, { provide: ICON_SETTINGS, useValue: { type: 'font' } }],
24
+ * template: `...`
27
25
  * })
28
26
  * export class AppComponent {}
29
27
  * ```
@@ -32,7 +30,7 @@ export declare class IconsService implements OnDestroy {
32
30
  private _iconSettings;
33
31
  private iconSettingsService;
34
32
  /**
35
- * Notifies subscribers of the initial icon settings, and upon each call to `notify`.
33
+ * Notifies subscribers of the initial icon settings and on each call to `notify`.
36
34
  * @hidden
37
35
  */
38
36
  readonly changes: Subject<IconSettings>;
@@ -3,13 +3,13 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the icon flip direction.
6
+ * Specifies the `IconFlip` direction.
7
7
  *
8
- * The possible values are:
9
- * * `default` (Default)&mdash;No flipping applied.
10
- * * `horizontal`&mdash;Flips the icon in horizontal direction.
11
- * * `vertical`&mdash;Flips the icon in vertical direction.
12
- * * `both`&mdash;Flips the icon in both horizontal and vertical directions.
8
+ * Use this type to control how to flip an icon. The possible values are:
9
+ * - `default`: No flip applied.
10
+ * - `horizontal`: Flip the icon horizontally.
11
+ * - `vertical`: Flip the icon vertically.
12
+ * - `both`: Flip the icon both horizontally and vertically.
13
13
  *
14
14
  */
15
15
  export type IconFlip = 'default' | 'horizontal' | 'vertical' | 'both';
@@ -6,9 +6,35 @@ import { IconFlip } from "./flip";
6
6
  import { IconType } from "./icon-type";
7
7
  import { IconSize } from "./size";
8
8
  import { IconThemeColor } from "./theme-color";
9
+ /**
10
+ * Represents the icon settings for Kendo UI icons.
11
+ * Use the `IconSettings` interface to set the icon `type`, `themeColor`, `size`, and `flip` direction.
12
+ *
13
+ * @example
14
+ * ```typescript
15
+ * const settings: IconSettings = {
16
+ * type: 'svg',
17
+ * themeColor: 'primary',
18
+ * size: 'large',
19
+ * flip: 'horizontal'
20
+ * };
21
+ * ```
22
+ */
9
23
  export interface IconSettings {
24
+ /**
25
+ * Sets the `type` of the icon.
26
+ */
10
27
  type?: IconType;
28
+ /**
29
+ * Sets the `themeColor` of the icon.
30
+ */
11
31
  themeColor?: IconThemeColor;
32
+ /**
33
+ * Sets the `size` of the icon.
34
+ */
12
35
  size?: IconSize;
36
+ /**
37
+ * Sets the `flip` direction of the icon.
38
+ */
13
39
  flip?: IconFlip;
14
40
  }
@@ -2,4 +2,8 @@
2
2
  * Copyright © 2025 Progress Software Corporation. All rights reserved.
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
+ /**
6
+ * Specifies the `IconType` for icons.
7
+ * Use `IconType` to set how the icon renders.
8
+ */
5
9
  export type IconType = 'font' | 'svg';
@@ -3,17 +3,17 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the size of the icon.
6
+ * Specifies the `IconSize` of the icon.
7
7
  *
8
- * The possible values are:
9
- * * `default` (Default)&mdash;Font-size: 16px; Width: 16px; Height: 16px.
10
- * * `xsmall`&mdash;Font-size: 12px; Width: 12px; Height: 12px.
11
- * * `small`&mdash;Font-size: 14px; Width: 14px; Height: 14px.
12
- * * `medium`&mdash;Font-size: 16px; Width: 16px; Height: 16px.
13
- * * `large`&mdash;Font-size: 20px; Width: 20px; Height: 20px.
14
- * * `xlarge`&mdash;Font-size: 24px; Width: 24px; Height: 24px.
15
- * * `xxlarge`&mdash;Font-size: 32px; Width: 32px; Height: 32px.
16
- * * `xxxlarge`&mdash;Font-size: 48px; Width: 48px; Height: 48px.
8
+ * Use this type to set the icon size. The possible values are:
9
+ * - `default` (Default)&mdash;Font-size: 16px; Width: 16px; Height: 16px.
10
+ * - `xsmall`&mdash;Font-size: 12px; Width: 12px; Height: 12px.
11
+ * - `small`&mdash;Font-size: 14px; Width: 14px; Height: 14px.
12
+ * - `medium`&mdash;Font-size: 16px; Width: 16px; Height: 16px.
13
+ * - `large`&mdash;Font-size: 20px; Width: 20px; Height: 20px.
14
+ * - `xlarge`&mdash;Font-size: 24px; Width: 24px; Height: 24px.
15
+ * - `xxlarge`&mdash;Font-size: 32px; Width: 32px; Height: 32px.
16
+ * - `xxxlarge`&mdash;Font-size: 48px; Width: 48px; Height: 48px.
17
17
  *
18
18
  */
19
19
  export type IconSize = 'default' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge' | 'xxxlarge';
@@ -3,20 +3,20 @@
3
3
  * Licensed under commercial license. See LICENSE.md in the project root for more information
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  /**
6
- * Specifies the theme color of the Icon.
6
+ * Specifies the `IconThemeColor` of the icon.
7
7
  *
8
- * The possible values are:
9
- * * `inherit` (Default)&mdash;Applies coloring based on the current color.
10
- * * `primary` &mdash;Applies coloring based on primary theme color.
11
- * * `secondary`&mdash;Applies coloring based on secondary theme color.
12
- * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
13
- * * `info`&mdash;Applies coloring based on info theme color.
14
- * * `success`&mdash; Applies coloring based on success theme color.
15
- * * `warning`&mdash; Applies coloring based on warning theme color.
16
- * * `error`&mdash; Applies coloring based on error theme color.
17
- * * `dark`&mdash; Applies coloring based on dark theme color.
18
- * * `light`&mdash; Applies coloring based on light theme color.
19
- * * `inverse`&mdash; Applies coloring based on inverse theme color.
8
+ * Use this type to set the icon theme color. The possible values are:
9
+ * - `inherit` (Default)&mdash;Applies coloring based on the current color.
10
+ * - `primary` &mdash;Applies coloring based on primary theme color.
11
+ * - `secondary`&mdash;Applies coloring based on secondary theme color.
12
+ * - `tertiary`&mdash; Applies coloring based on tertiary theme color.
13
+ * - `info`&mdash;Applies coloring based on info theme color.
14
+ * - `success`&mdash; Applies coloring based on success theme color.
15
+ * - `warning`&mdash; Applies coloring based on warning theme color.
16
+ * - `error`&mdash; Applies coloring based on error theme color.
17
+ * - `dark`&mdash; Applies coloring based on dark theme color.
18
+ * - `light`&mdash; Applies coloring based on light theme color.
19
+ * - `inverse`&mdash; Applies coloring based on inverse theme color.
20
20
  *
21
21
  */
22
22
  export type IconThemeColor = 'inherit' | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
package/directives.d.ts CHANGED
@@ -5,14 +5,56 @@
5
5
  import { IconComponent } from "./icon/icon.component";
6
6
  import { SVGIconComponent } from "./svg-icon/svg-icon.component";
7
7
  /**
8
- * Utility array that contains all `KendoIcon` related components and directives
8
+ * Represents the utility array that contains all `KendoIcon`-related components and directives.
9
+ *
10
+ * @example
11
+ * ```typescript
12
+ * import { Component } from '@angular/core';
13
+ * import { KENDO_ICON } from '@progress/kendo-angular-icons';
14
+ *
15
+ * @Component({
16
+ * selector: 'my-app',
17
+ * standalone: true,
18
+ * imports: [KENDO_ICON],
19
+ * template: `...`,
20
+ * })
21
+ * export class AppComponent {}
22
+ * ```
9
23
  */
10
24
  export declare const KENDO_ICON: readonly [typeof IconComponent];
11
25
  /**
12
- * Utility array that contains all `KendoSVGIcon` related components and directives
26
+ * Represents the utility array that contains all `KendoSVGIcon`-related components and directives.
27
+ *
28
+ * @example
29
+ * ```typescript
30
+ * import { Component } from '@angular/core';
31
+ * import { KENDO_SVGICON } from '@progress/kendo-angular-icons';
32
+ *
33
+ * @Component({
34
+ * selector: 'my-app',
35
+ * standalone: true,
36
+ * imports: [KENDO_SVGICON],
37
+ * template: `...`,
38
+ * })
39
+ * export class AppComponent {}
40
+ * ```
13
41
  */
14
42
  export declare const KENDO_SVGICON: readonly [typeof SVGIconComponent];
15
43
  /**
16
- * Utility array that contains all `@progress/kendo-angular-icons` related components and directives
44
+ * Represents the utility array that contains all `@progress/kendo-angular-icons`-related components and directives.
45
+ *
46
+ * @example
47
+ * ```typescript
48
+ * import { Component, ViewEncapsulation } from '@angular/core';
49
+ * import { KENDO_ICONS } from '@progress/kendo-angular-icons';
50
+ *
51
+ * @Component({
52
+ * selector: 'my-app',
53
+ * standalone: true,
54
+ * imports: [KENDO_ICONS],
55
+ * template: `...`,
56
+ * })
57
+ * export class AppComponent {}
58
+ * ```
17
59
  */
18
60
  export declare const KENDO_ICONS: readonly [typeof IconComponent, typeof SVGIconComponent];
@@ -29,25 +29,11 @@ export class IconBaseDirective {
29
29
  return this.flip === 'vertical' || this.flip === 'both';
30
30
  }
31
31
  /**
32
- * Flips the icon horizontally, vertically or in both directions.
32
+ * Flips the icon horizontally, vertically, or in both directions.
33
33
  */
34
34
  flip;
35
35
  /**
36
- * Specifies the theme color for the Icon.
37
- *
38
- * The possible values are:
39
- * * `inherit` (Default)&mdash;Applies coloring based on the current color.
40
- * * `primary` &mdash;Applies coloring based on primary theme color.
41
- * * `secondary`&mdash;Applies coloring based on secondary theme color.
42
- * * `tertiary`&mdash; Applies coloring based on tertiary theme color.
43
- * * `info`&mdash;Applies coloring based on info theme color.
44
- * * `success`&mdash; Applies coloring based on success theme color.
45
- * * `warning`&mdash; Applies coloring based on warning theme color.
46
- * * `error`&mdash; Applies coloring based on error theme color.
47
- * * `dark`&mdash; Applies coloring based on dark theme color.
48
- * * `light`&mdash; Applies coloring based on light theme color.
49
- * * `inverse`&mdash; Applies coloring based on inverse theme color.
50
- *
36
+ * Sets the `IconThemeColor` for the icon. Use this property to apply a theme color.
51
37
  */
52
38
  set themeColor(themeColor) {
53
39
  const element = this.element.nativeElement;
@@ -65,18 +51,7 @@ export class IconBaseDirective {
65
51
  return this._themeColor;
66
52
  }
67
53
  /**
68
- * Specifies the size of the Icon.
69
- *
70
- * The possible values are:
71
- * * `default` (Default) (Font-size: 16px; Width: 16px; Height: 16px)
72
- * * `xsmall` (Font-size: 12px; Width: 12px; Height: 12px;)
73
- * * `small` (Font-size: 14px; Width: 14px; Height: 14px;)
74
- * * `medium` (Font-size: 16px; Width: 16px; Height: 16px;)
75
- * * `large` (Font-size: 20px; Width: 20px; Height: 20px;)
76
- * * `xlarge` (Font-size: 24px; Width: 24px; Height: 24px;)
77
- * * `xxlarge` (Font-size: 32px; Width: 32px; Height: 32px;)
78
- * * `xxxlarge` (Font-size: 48px; Width: 48px; Height: 48px;)
79
- *
54
+ * Sets the `IconSize` for the icon. Use this property to change the icon size.
80
55
  */
81
56
  set size(size) {
82
57
  const currentClass = sizeClasses[this.size];
@@ -4,17 +4,17 @@
4
4
  *-------------------------------------------------------------------------------------------*/
5
5
  import { InjectionToken } from '@angular/core';
6
6
  /**
7
- * A token that specifies the [IconSettings](slug:api_icons_iconsettings) of the Kendo UI for Angular components ([see example](slug:icon_settings#toc-icons-configuration)).
7
+ * Represents the token for the `IconSettings` of Kendo UI for Angular components.
8
+ * Use this token to configure icon settings. ([See example.](slug:icon_settings#toc-icons-configuration))
8
9
  *
9
- * ```ts
10
+ * @example
11
+ * ```typescript
10
12
  * import { NgModule } from '@angular/core';
11
13
  *
12
14
  * @NgModule({
13
- * ...
14
- * providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' }}]
15
+ * providers: [{ provide: ICON_SETTINGS, useValue: { type: 'svg', size: 'xsmall' } }]
15
16
  * })
16
17
  * export class AppModule {}
17
18
  * ```
18
- *
19
19
  */
20
20
  export const ICON_SETTINGS = new InjectionToken('Kendo UI Icon-Settings token');
@@ -6,8 +6,15 @@ import { Injectable } from '@angular/core';
6
6
  import { Subject } from 'rxjs';
7
7
  import * as i0 from "@angular/core";
8
8
  /**
9
- * A service that returns the current icon settings to be used in subscribers.
10
- * Use the public `notify` method to change the icon settings dynamically.
9
+ * Represents the service that manages icon settings.
10
+ * Use the `notify` method to update icon settings dynamically.
11
+ *
12
+ * @example
13
+ * ```typescript
14
+ * constructor(private iconSettingsService: IconSettingsService) {}
15
+ *
16
+ * this.iconSettingsService.notify({ themeColor: 'primary' });
17
+ * ```
11
18
  */
12
19
  export class IconSettingsService {
13
20
  /**
@@ -15,9 +22,13 @@ export class IconSettingsService {
15
22
  */
16
23
  changes = new Subject();
17
24
  /**
18
- * Notifies subscribers that the icon settings were changed.
25
+ * Notifies subscribers about changes in the icon settings.
19
26
  *
20
- * @param iconSettings - (Optional) A new value for the [icon settings token]({% slug api_icons_icon_settings %}).
27
+ * @param iconSettings - (Optional) Sets a new value for the [icon settings token]({% slug api_icons_icon_settings %}).
28
+ * @example
29
+ * ```typescript
30
+ * iconSettingsService.notify({ size: 'large' });
31
+ * ```
21
32
  */
22
33
  notify(iconSettings) {
23
34
  this.changes.next(iconSettings);
@@ -13,21 +13,19 @@ import * as i0 from "@angular/core";
13
13
  import * as i1 from "./icon-settings.service";
14
14
  const DEFAULT_ICON_SETTINGS = { type: 'svg' };
15
15
  /**
16
- * The service responsible for handling changes in the icons settings. Should be included in the providers array when implementing the functionality in a standalone component.
16
+ * Represents the service that manages icon settings.
17
+ * Add this service to the `providers` array when you use it in a standalone component.
17
18
  *
18
19
  * @example
19
- *
20
- * ```ts-no-run
21
- * // Import the IconsService
20
+ * ```typescript
22
21
  * import { IconsService } from '@progress/kendo-angular-icons';
23
22
  *
24
- * // Define a standalone component
25
23
  * @Component({
26
- * selector: my-component,
27
- * standalone: true,
28
- * imports: [ ... ],
29
- * providers: [IconsService, { provide: ICON_SETTINGS , useValue: { type: 'font' } }],
30
- * template: ...
24
+ * selector: 'my-component',
25
+ * standalone: true,
26
+ * imports: [ ... ],
27
+ * providers: [IconsService, { provide: ICON_SETTINGS, useValue: { type: 'font' } }],
28
+ * template: `...`
31
29
  * })
32
30
  * export class AppComponent {}
33
31
  * ```
@@ -36,7 +34,7 @@ export class IconsService {
36
34
  _iconSettings;
37
35
  iconSettingsService;
38
36
  /**
39
- * Notifies subscribers of the initial icon settings, and upon each call to `notify`.
37
+ * Notifies subscribers of the initial icon settings and on each call to `notify`.
40
38
  * @hidden
41
39
  */
42
40
  changes = new BehaviorSubject(this.iconSettings || DEFAULT_ICON_SETTINGS);
@@ -5,19 +5,61 @@
5
5
  import { IconComponent } from "./icon/icon.component";
6
6
  import { SVGIconComponent } from "./svg-icon/svg-icon.component";
7
7
  /**
8
- * Utility array that contains all `KendoIcon` related components and directives
8
+ * Represents the utility array that contains all `KendoIcon`-related components and directives.
9
+ *
10
+ * @example
11
+ * ```typescript
12
+ * import { Component } from '@angular/core';
13
+ * import { KENDO_ICON } from '@progress/kendo-angular-icons';
14
+ *
15
+ * @Component({
16
+ * selector: 'my-app',
17
+ * standalone: true,
18
+ * imports: [KENDO_ICON],
19
+ * template: `...`,
20
+ * })
21
+ * export class AppComponent {}
22
+ * ```
9
23
  */
10
24
  export const KENDO_ICON = [
11
25
  IconComponent
12
26
  ];
13
27
  /**
14
- * Utility array that contains all `KendoSVGIcon` related components and directives
28
+ * Represents the utility array that contains all `KendoSVGIcon`-related components and directives.
29
+ *
30
+ * @example
31
+ * ```typescript
32
+ * import { Component } from '@angular/core';
33
+ * import { KENDO_SVGICON } from '@progress/kendo-angular-icons';
34
+ *
35
+ * @Component({
36
+ * selector: 'my-app',
37
+ * standalone: true,
38
+ * imports: [KENDO_SVGICON],
39
+ * template: `...`,
40
+ * })
41
+ * export class AppComponent {}
42
+ * ```
15
43
  */
16
44
  export const KENDO_SVGICON = [
17
45
  SVGIconComponent
18
46
  ];
19
47
  /**
20
- * Utility array that contains all `@progress/kendo-angular-icons` related components and directives
48
+ * Represents the utility array that contains all `@progress/kendo-angular-icons`-related components and directives.
49
+ *
50
+ * @example
51
+ * ```typescript
52
+ * import { Component, ViewEncapsulation } from '@angular/core';
53
+ * import { KENDO_ICONS } from '@progress/kendo-angular-icons';
54
+ *
55
+ * @Component({
56
+ * selector: 'my-app',
57
+ * standalone: true,
58
+ * imports: [KENDO_ICONS],
59
+ * template: `...`,
60
+ * })
61
+ * export class AppComponent {}
62
+ * ```
21
63
  */
22
64
  export const KENDO_ICONS = [
23
65
  ...KENDO_ICON,
@@ -7,7 +7,12 @@ import { isDocumentAvailable } from '@progress/kendo-angular-common';
7
7
  import { IconBaseDirective } from '../common/icon-base';
8
8
  import * as i0 from "@angular/core";
9
9
  /**
10
- * Represents the Kendo UI Icon component for Angular.
10
+ * Represents the Icon component for Angular.
11
+ *
12
+ * @example
13
+ * ```html
14
+ * <kendo-icon name="home"></kendo-icon>
15
+ * ```
11
16
  */
12
17
  export class IconComponent extends IconBaseDirective {
13
18
  element;
@@ -15,8 +20,7 @@ export class IconComponent extends IconBaseDirective {
15
20
  hostClass = true;
16
21
  hostAriaHidden = true;
17
22
  /**
18
- * Defines the name for an existing icon in a Kendo UI theme, which will be rendered.
19
- * All [Kendo UI Icons](slug:icon_list) are supported.
23
+ * Sets the `Icon` to render. Supports all [Kendo UI Icons](slug:icon_list).
20
24
  */
21
25
  set name(name) {
22
26
  if (isDocumentAvailable()) {
@@ -18,37 +18,24 @@ export class IconWrapperComponent {
18
18
  element;
19
19
  hostClass = true;
20
20
  /**
21
- * Defines the name for an existing font icon in a Kendo UI theme, which will be rendered.
22
- * All [Kendo UI Icons](slug:icons#icons-list) are supported.
21
+ * Sets the name for an existing font icon in a Kendo UI theme to render.
22
+ * Supports all [Kendo UI Icons](slug:icons#icons-list).
23
23
  */
24
24
  name;
25
25
  /**
26
- * Defines an [SVGIcon](slug:api_icons_svgicon) to be rendered.
26
+ * Sets the [SVGIcon](slug:api_icons_svgicon) to render.
27
27
  */
28
28
  svgIcon;
29
29
  /**
30
- * Provided by consuming components in case an additional k-specific class needs to be rendered
31
- * on the internal Icon component.
30
+ * Sets an additional class on the internal Icon component.
32
31
  */
33
32
  innerCssClass = '';
34
33
  /**
35
- * Provided by consuming components in case a custom font icon class is set
36
- * by the developer using the consuming component through its API.
34
+ * Sets a custom font icon class using the API of the consuming component.
37
35
  */
38
36
  customFontClass = '';
39
37
  /**
40
- * Specifies the size of the Icon.
41
- *
42
- * The possible values are:
43
- * * `default` (Default) (Font-size: 16px; Width: 16px; Height: 16px)
44
- * * `xsmall` (Font-size: 12px; Width: 12px; Height: 12px;)
45
- * * `small` (Font-size: 14px; Width: 14px; Height: 14px;)
46
- * * `medium` (Font-size: 16px; Width: 16px; Height: 16px;)
47
- * * `large` (Font-size: 20px; Width: 20px; Height: 20px;)
48
- * * `xlarge` (Font-size: 24px; Width: 24px; Height: 24px;)
49
- * * `xxlarge` (Font-size: 32px; Width: 32px; Height: 32px;)
50
- * * `xxxlarge` (Font-size: 48px; Width: 48px; Height: 48px;)
51
- *
38
+ * Sets the `IconSize` for the icon.
52
39
  */
53
40
  size;
54
41
  get customClasses() {