mapbox gl is not rendering the svg for custom controller

Question

I am trying to render a mdiLink for copying the current URL in mapboxgl, the button renders and I have all the functionality but it doesn't render the SVG

export class CustomShareControl{
 onAdd() {
  const path = document.createElement("path");
  path.setAttribute("d", mdiLink) // the svg value comes from @mdi/js
  path.setAttribute("style", "fill: #000000")

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("viewbox", "0 0 24 24");
  svg.setAttribute("style", "width: 40px; height: 40px;")
  svg.appendChild(path);

  const btn = document.createElement("button");
  btn.className = "mapboxgl-ctrl-icon";
  btn.onclick = () => {
    navigator.clipboard.writeText(window.location.href);
  // add toast alert
  };

  btn.appendChild(svg);

  const container = document.createElement("div");
  container.className = "mapboxgl-ctrl-group mapboxgl-ctrl";
  container.appendChild(btn);

  return container;
 }

 onRemove() {
   return;
 }
}

it's currently rendering like this blank icon

copy-pasting the generated HTML does render the SVG, any thoughts? svg

SVG image, M3.9,12C3.9,10.29 5.29,8.9 7,8.9H11V7H7A5,5 0 0,0 2,12A5,5 0 0,0 7,17H11V15.1H7C5.29,15.1 3.9,13.71 3.9,12M8,13H16V11H8V13M17,7H13V8.9H17C18.71,8.9 20.1,10.29 20.1,12C20.1,13.71 18.71,15.1 17,15.1H13V17H17A5,5 0 0,0 22,12A5,5 0 0,0 17,7Z