FontAwesome with PrimeVue Tree

[deep]

Anyone get FA icons working within a Tree template such as below? I've imported the icons and have searched around and found some people getting FA icons working but nothing that is specific to use a template / slot for the PrimeVue Tree. Not sure if this is possible... No DOM element for my <font-awesome-icon> element gets rendered... My data includes a property "faIcon" so the PrimeVue Tree doesn't get confused if I include a "Icon" property in my data model.

Thanks for any pointers... My thought was that with the template for tree items I could somehow bypass the builtin PrimeVue icons... Not working yet though...

<template>
<Toast />
<Tree style="overflow-x: hidden; height: 100%; border: 0;"
:value="nodes"
:expandedKeys="expandedNodes"
selectionMode="single"
scrollHeight="flex"
:selectionKeys="selectedNodes"
@nodeSelect="onNodeSelect"
@nodeUnselect="onNodeUnselect" >

<template #default="slotProps">
<font-awesome-icon :icon="slotProps.node.faIcon"></font-awesome-icon>
{{slotProps.node.label}}
</template>

</Tree>
</template>

[deep]

This works. Switched to using simple webFonts with FontAwesome... Hopefully this can help someone.

<template>
<Toast />
<Tree style="overflow-x: hidden; height: 100%; border: 0;"
:value="nodes"
:expandedKeys="expandedNodes"
selectionMode="single"
scrollHeight="flex"
:selectionKeys="selectedNodes"
@nodeSelect="onNodeSelect"
@nodeUnselect="onNodeUnselect" >

<template #default="slotProps">
<span :style="{color: slotProps.node.color}">
<i :class="slotProps.node.faIcon"></i>
</span>
{{slotProps.node.label}}
</template>

</Tree>
</template>

[bahadirsofuoglu]

Hi, Thank you for sharing