CODEWITHSUNDEEP
cssangularprimeng
reza
reza

Reputation: 6358

how to replace an primeNg tree icon for a branch node to + or -?

angular CLI version 6

"primeicons": "^1.0.0-beta.9",
"primeng": "6.0.1",
"font-awesome": "^4.7.0",

I am trying to change the default icon for tree node to + and -. I see suggested solutions here but I think they must for older version of the library since it does not work.

Any guidance on this?

enter image description here

Upvotes: 2

Views: 5456

Answers (2)

Пламен Петров
Пламен Петров

Reputation: 1

In order to show the icon with this method, you have to set the font-family property too.

Upvotes: 0

Kishor Prakash
Kishor Prakash

Reputation: 8151

From CSS you could replace the Icon content, to desired icon content.

To do this you have to observe the current css classes that are applied to your p-tree when you expand and close.

For Example:

The CSS class for Tree Toggler on p-tree is: .ui-treetable-toggler And the icon class normal position is: fa-caret-right and the content class is: fa-caret-right:before

So to replace that with + you will have to use following CSS:

.your-tree-table-class .ui-treetable-toggler.fa-caret-right:before{
  content: "\f067";
}

Notice that I have used my own CSS class as your-tree-class so that it affects only the specific p-tree. Not all of them.

And to replace with - when you expand use:

.your-tree-table-class .ui-treetable-toggler.fa-caret-down:before{
  content: "\f068";
}

Here is the list of Font Awesome Icons and their CSS content values:
http://astronautweb.co/snippet/font-awesome/

Upvotes: 1

Related Questions