Changing TreeGrid Dropdown icon

Question

Is there a way to change the expand icon for TreeGrid in Vaadin?

I have attached the current UI of the tree.I want to add '+' as icon for expanding the tree instead of normal right pointing arrow and when the tree is expanded the icon should change to '-' instead of down-pointing arrow...

Current Treegrid with dummy data provider (https://i.stack.imgur.com/wHUUI.png)

I tried various CSS settings to achieve this but none seems to work

Answer 1

There is an addon that changes the icon and add lines between the parent and the children: https://vaadin.com/directory/component/explorer-tree-grid

Answer 2

They are not purposed to be changed originally. But there are limited options to customize them with CSS, e.g. if you want to change the caret to plus/minus icons from Lumo Icons. Add these to your styles.css. If you happen to have imported to font icon in your styles, then it opens more options by defining the font-family here too and using \xxxx code for that icon.

vaadin-grid-tree-toggle[expanded]::part(toggle)::before {
    content: var(--lumo-icons-minus);
    transform: unset;
}

vaadin-grid-tree-toggle::part(toggle)::before {
    content: var(--lumo-icons-plus);
}