Using a MUI Icon as side label text

[ndtreviv]

I want to have a side label with a Material UI Icon in it.

This is what I'm trying:

          nodeSideLabels={useCallback((n) => n.expanded ? [] : [{ text: <AllOutIcon /> }], [])}

but when it renders the side label it doesn't render the icon, but instead: [object Object]. I can see why, too.

My question is: Is there a way to make this work?
If not, it would be a nice feature :)

[rokotyan]

Since Unovis's core is not native to React, you can't provide icons as React components. However, you can import Material UI icons as an icon font and provide an the exact characters code to text:

          nodeSideLabels={useCallback((n) => n.expanded ? [] : [{ text: `` }], [])}

Don't forget to set the --vis-graph-icon-font-family CSS variable to the name of your icon font, e.g.:

--vis-graph-icon-font-family : 'Material Icons'

P.S. You can browse through the icons and find their character codes here:
b1.png)

[ndtreviv]

Excellent - thanks!

[ndtreviv]

Actually, I just noticed that the one I'm using (https://mui.com/material-ui/material-icons/) renders them as SVGs rather than using a special font. I'm guessing that won't work...?

[rokotyan]

@ndtreviv Unfortunately not, we'll think about adding support for SVG icons in the future though.