I’m trying to add an icon-selector to my own widget that resembles the functionality of Cumulocity KPI widget. But it seems that I am currently doing this incorrectly and need a bit of assistance in terms of getting it to show within the UI.
Attached is an example of what I’m looking for in terms of the KPI widget and what I have currently.
This is the code snippet where I am having difficulties:
config.component.html code snippet:
<c8y-icon-selector
[selectedIcon]=“selectedIcon”
(selectedIconChange)=“onIconSelected($event)”
>
<i [c8yIcon]=“‘rocket’”>
Rocket icon test
<c8y-li-icon [icon]=“‘bell’”>
Selected: {{ selectedIcon }}
<c8y-icon-selector
[selectedIcon]=“selectedIcon”
[availableIcons]=“availableIcons”
(selectedIconChange)=“selectedIcon = $event”
>
config.component.ts code snippet:
//ADDED and TESTING
availableIcons = [‘cogs’, ‘bell’, ‘car’, ‘anchor’]; // Cumulocity built-ins
selectedIcon: string = ‘bell’;
selectedDatapointIndex: number | null = null;
onIconSelected(icon: string) {
this.selectedIcon = icon;
console.log(‘Selected icon:’, icon);
}
