Change an icon in Blazorise Treeview

Question

I am using Blazorise Treeview and do not find how to change default icons for opening and closing a node. The component strongly depends on fa-plus-square and fa-minus-square and I do not see how to customise it.
I can find something helpful in the official documentation : Blazorise Treeview Documentation.
This problem is mentioned in an issue https://github.com/Megabit/Blazorise/issues/994 not sure if there is a solution.

Answer 1

Hey I think the only solution is to override the following style

.fa-plus-square:before {
    content: "\f0fe" !important; // Replace the content by another icon from font awesome
}

But be careful, some icons need a specific font-weight. So for example to replace by a cross, I need:

.far.fa-plus-square {
    font-weight: 900 !important;
}
.fa-plus-square:before {
    content: "\f00d" !important;
}

You may need some more specific CSS selector in order to override the included style of the library, but it is definitely the way to achieve it - before github issue being resolved.

EDIT: just one info in addition, this modification will override the style of the icon itself, but you may need them somewhere else in your project, so I recommend you to encapsulate the whole Treeview component inside a dedicated div with a class, and to ajust the CSS selectors that I wrote to include the new class. (.far.fa-plus-square become .my-tree-view-container .far.fa-plus-square)

Answer 2

Starting from Blazorise version 1.1.0 the following parameters have been added to the TreeView component for customizing icons:

Name	Description
CollapseIconName	Defines the name of the treenode collapse icon.
CollapseIconSize	Defines the size of the treenode collapse icon.
CollapseIconStyle	Defines the style of the treenode collapse icon.
ExpandIconName	Defines the name of the treenode expand icon.
ExpandIconSize	Defines the size of the treenode expand icon.
ExpandIconStyle	Defines the style of the treenode expand icon.

TreeView documentation