cssfont-awesomeprimengprimeicons

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

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)

Solution

  • 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