Web SDK documentation
  1. Directives
  2. IconDirective

File

core/common/icon.directive.ts

Description

Allows to set a icon. Switches between c8y default icons and font awesome icons.

Example :
<i [c8yIcon]="'clock'">

Metadata

Selector [c8yIcon]
Standalone true

Index

Inputs
Accessors

Constructor

constructor(el: ElementRef, renderer: Renderer2)
Parameters :
Name Type Optional
el ElementRef No
renderer Renderer2 No

Inputs

c8yIcon
Type : SupportedIconsSuggestions | literal type

Sets the icon to be displayed. This directive handles the correct CSS classes for Cumulocity IoT's dual-color icon sets.

There are two main icon sets:

  1. Cumulocity Icons: These are specific to the platform. To use them, provide the icon name prefixed with c8y-.
  2. Delight Icons: This is the default icon set. To use them, provide just the icon name without any prefix.
Example :
<!-- To display a Cumulocity IoT icon (e.g., cockpit) -->
<i [c8yIcon]="'c8y-cockpit'"></i>

<!-- To display a default Delight icon (e.g., download) -->
<i [c8yIcon]="'download'"></i>

<!-- You can also use it without property binding for static icons -->
<i c8yIcon="building"></i>

Accessors

c8yIcon
setc8yIcon(icon: SupportedIconsSuggestions | literal type)

Sets the icon to be displayed. This directive handles the correct CSS classes for Cumulocity IoT's dual-color icon sets.

There are two main icon sets:

  1. Cumulocity Icons: These are specific to the platform. To use them, provide the icon name prefixed with c8y-.
  2. Delight Icons: This is the default icon set. To use them, provide just the icon name without any prefix.
Example :
<!-- To display a Cumulocity IoT icon (e.g., cockpit) -->
<i [c8yIcon]="'c8y-cockpit'"></i>

<!-- To display a default Delight icon (e.g., download) -->
<i [c8yIcon]="'download'"></i>

<!-- You can also use it without property binding for static icons -->
<i c8yIcon="building"></i>
Parameters :
Name Type Optional
icon SupportedIconsSuggestions | literal type No
Returns : void

results matching ""

    No results matching ""