CODEWITHSUNDEEP
cssangularfont-awesomeprimeng
reza
reza

Reputation: 6358

how do I change the color for a tree node icon in a primeNg tree?

I am using primeNg tree in an angular CLI 6 project.

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

What I need to do is to change some of the treeNode icon colors. I need to have a blue checked sign...

I am using the styleClass parameter and setting the color: blue and the icon AND the text is shown as blue.

How do I just change the icon color.

                {
                    label: 'Procedure is an isolated CABG Surgery',
                    icon: 'fa fa-folder',
                    // collapsedIcon: 'fa fa-folder',
                    // expandedIcon: 'fa fa-folder-open',
                    styleClass: 'xxx',
                },

and in css file, I have 

.xxx {
color: blue;

}

Thoughts?

Upvotes: 3

Views: 5150

Answers (3)

Djamel eddine CHAHRAT
Djamel eddine CHAHRAT

Reputation: 145

as is mentioned in this LINK

try to use css directly on your JSON tree

Upvotes: 0

ichak khoury
ichak khoury

Reputation: 217

just add the below in your CSS:

::ng-deep .ui-tree-container .ui-tree-toggler{
color: #f9c71a;


}


::ng-deep .ui-tree-container .ui-treenode-icon{
    color: #f9c71a;
  }

  ::ng-deep .fa-caret-right::before {
     content: "\F067";
  }

  ::ng-deep .fa-caret-down::before {
     content: "\F068";
  }

Upvotes: 1

reza
reza

Reputation: 6358

what I ended up doing was 

icon: 'fa fa-check',

I added 

.fa-check:before {
    color: green;
}

and all is well...

Upvotes: 1

Related Questions