I'm trying to use the Tree component to paint a tree with parents and childs, my problem is with the "expandedIcon" and "collapsedIcon" property.
The component simply ignore this values, and always painting the parent expandable node with the default icon "pi-chevron-right". Apart from this, the icon is showing always as a blank square.
My problem with the square icon will be solved if the node shows a Fontawesome icon, that i define on the "expandedIcon" and "collapsedIcon" property, but prime faces always try to use the default icon.
This is my parent node:
Code: Select all
{
"label": "Page Info",
"type": "PAGE_NODE",
"expandedIcon": "fas fa-chevron-up",
"collapsedIcon": "fas fa-chevron-down"
}
I have see the source code of PrimeNG, and the icon is on the code, without any option to change it:
https://github.com/primefaces/primeng/b ... ee/tree.ts
Code: Select all
<button type="button" [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
<span class="p-tree-toggler-icon pi pi-fw" [ngClass]="{'pi-chevron-right':!node.expanded,'pi-chevron-down':node.expanded}"></span>
</button>
Code: Select all
<button type="button" [attr.aria-label]="tree.togglerAriaLabel" class="p-tree-toggler p-link" (click)="toggle($event)" pRipple tabindex="-1">
<span class="p-tree-toggler-icon pi pi-fw" [ngClass]="getExpandedIcon()"></span>
</button>
getExpandedIcon() {
let icon: string;
if (this.node.expanded) {
icon = this.node.expandedIcon || 'pi-chevron-down'
} else {
icon = this.node.collapsedIcon || 'pi-chevron-right'
}
return icon;
}