Can icons be used as node backgrounds?

[shashankshukla96]

Can I use any icon library to add an icon on the node ? Something like this

[kgolubic]

Some time ago I've written this tutorial - https://memgraph.com/docs/memgraph/how-to-guides/font-awesome-for-node-images . Maybe you could convert icons to images and then use them via their URL?

[tonilastre]

@kgolubic already gave one way to solve it.

Another one, if you want to approach it from the code side, you need to have SVG code for icons. You can then generate an Image data URL that can be used to draw that. Here is one example:

// SVG code with rectangle and custom HTML text
const svg = `
<svg xmlns="http://www.w3.org/2000/svg" width="200" height="200">
  <rect width="200" height="200" style="fill:rgb(240,10,10);stroke-width:3;stroke:rgb(0,0,0)" />
  <foreignObject width="100%" height="100%">
    <div xmlns="http://www.w3.org/1999/xhtml" style="font-size:50px">
      <span>SVG on</span>
      <span style="color:white;">CANVAS</span>
    </div>
  </foreignObject>
  </svg>
`;

const blob = new Blob([svg], {type: 'image/svg+xml'});
const url = URL.createObjectURL(blob);

...

orb.data.setDefaultStyle({
  getNodeStyle(node) {
    return {
      imageUrl: url,
      ...
    };
  },
  getEdgeStyle(edge) {
    ...
  },
}); 

[shashankshukla96]

Thanks @tonilastre @kgolubic.

This helps, but I am looking for something which can be customized on run time. Meaning, users of the application can change the icon on the node as per their preference.

With the approach you mentioned, I would have to download all the icons in SVG, and then store them in the application, which I don't think will be very feasible.

Any thoughts?

[tonilastre]

Usually, the icons are SVG, but even if they aren't, what you can do is utilize the Offscreen Canvas. Draw the image or an icon there, and then get the ObjectURL from that canvas (a final image).

When your users will pick icons, how do they do it? They can upload new ones or do they need to select from the presented ones?

[shashankshukla96]

This helps. Thanks for your support.