visjs library - Rendering a network of nodes with svg and custom html

I'm working with the visjs library, and rendering nodes with custom html via the svg tag.

My online project is at: https://stackblitz.com/edit/visjs-with-angular

The problem I'm having is when I attempt to add an image to the div, which is inside an svg.

You can see the vis.component.ts in the 'app\app\vis' folder of my proj, and its associated html view file.

In the drawSvgNetwork() function you will see where I build out the svg. I figured I'd be able to add a <i> tag with a background-image url, but it doesn't seem to be rendering when visjs renders the nodes

var svg = '<svg xmlns="http://www.w3.org/2000/svg" width="390" height="65">' +
          '<rect x="0" y="0" width="100%" height="100%" fill="#7890A7" stroke-width="20" stroke="#ffffff" ></rect>' +
          '<foreignObject x="15" y="10" width="100%" height="100%">' +
          '<div xmlns="http://www.w3.org/1999/xhtml" style="font-family:Arial; font-size:30px">' +
          ' <em>I</em> am' +
          '<span style="color:white; text-shadow:0 0 20px #000000;">' +            
            ' HTML in SVG!</span>' +

          // * THIS IMAGE IS NOT RENDERING * 
          '<i style="background-image: url(https://openclipart.org/download/280615/July-4th-v2B.svg);"></i>' +

          '</div>' +
          '</foreignObject>' +
          '</svg>';

i.e. Here is what you will see when running my online project.

.

*For reference:

The full online examples are at: http://visjs.org/network_examples.html And the specific demo page is here (view source to see js code): http://visjs.org/examples/network/nodeStyles/HTMLInNodes.html

from visjs library - Rendering a network of nodes with svg and custom html