How to add custom icon to Angular2 primeng Tree

5.4k views Asked by At

I am creating tree using Primeng p-tree in my application and I need to add custom icons to tree nodes as shown in below JSON data. But tree node is not showing icons. If anyone has any idea please help me to resolve this issue.

{
            "label": "Pictures",
            "data": "Pictures Folder",
            "icon": "CustIcon.png",
            "children": [
                {"label": "Pic1", "icon": "icon1.png"},
                {"label": "Pic2", "icon": "icon2.png"},
                {"label": "Pic3", "icon": "icon3.png"}]
        }
1

There are 1 answers

1
Bryan On

I solved this problem using a template:

<p-tree [value]="equipmentLibrary" selectionMode="single">
    <template let-node pTemplate type="default">
        <span><img class="tree-icon" src="{{node.icon}}" /></span>
    </template>
</p-tree>