How to use a fontAwesome icon for the PrimeNg Tree's toggler?

Question

I'm using FontAwesome in the app and I've not installed PrimeIcons.

So now when I'm using the PrimeNg's tree, I don't have any "chevron" displayed to open/close each item.

I cannot find a way in a documentation to override it(like a lot of their other component.

How can I replace their pi pi-fw pi-chevron-down by something like fa-solid fa-chevron-down(same for the chevron-left)?

I'm not sure how to target a CSS element to then apply another css on it? Or did I miss a way of customizing this element? (it's ok if it's in a global style)

score 0 · Accepted Answer · answered Aug 10 '22 at 12:56

Your .scss file, maybe could be better to set only related to involved components:

:host ::ng-deep {
    .pi {
        font-family: 'FontAwesome';
    }

    .pi-chevron-down:before {
        content:"\f107"
    }
}

in order to override other icons, please refer to fontawesome related cheatsheet

How to use a fontAwesome icon for the PrimeNg Tree's toggler?

1 Answers1