As stated in the question, I am unable to use a Material UI icon. The icon appears; however, I am unable to change the size of the icon and it appears to the right where the foreignObject is, instead of where the circle node is supposed to be. Here is my code:
const renderForeignObjectNode = ({
nodeDatum,
toggleNode,
foreignObjectProps,
}) => {
...
let nodeType;
...
return (
<>
{nodeType === "root" && (
<FolderIcon onClick={toggleNode} color="primary" style={{ fontSize: 0 }} />
)}
{nodeType !== "root" && (
<circle fill={color} r={15} onClick={toggleNode}></circle>
)}
<g>
{/* `foreignObject` requires width & height to be explicitly set. */}
<foreignObject {...foreignObjectProps}>
<div
style={{
border: "1px solid black",
borderRadius: "10px",
backgroundColor: color,
}}
onClick={() => handleClick(nodeDatum)}
>
<h3 style={{ textAlign: "center", color: textColor }}>
{nodeDatum.name}
</h3>
</div>
</foreignObject>
</g>
</>
);
};
<Tree
data={graphData}
zoom="0.7"
nodeSvgShape={{
shape: 'none',
shapeProps: {}
}}
rootNodeClassName="node__root"
branchNodeClassName="node__branch"
leafNodeClassName="node__leaf"
orientation="vertical"
dimensions={dimensions}
translate={translate}
renderCustomNodeElement={(rd3tProps) =>
renderForeignObjectNode({
...rd3tProps,
foreignObjectProps,
})
}
/>
