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'">

Icon classes are only applied when the element is visible in the viewport, improving performance for pages with many icons.

Metadata

Selector [c8yIcon]
Standalone true

Index

Inputs

Constructor

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

Inputs

c8yIcon
Type : SupportedIconsSuggestions | { class: string }

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>

results matching ""

    No results matching ""