JavaScript code is not working for getting icon from blade template that already rendered with defer attribute.

Hi, I am going to work with laravel blade-icons (https://github.com/blade-ui-kit/blade-icons). I'm successfully rendered icons in the blade template using the blade icon component. But when I am trying to get an icon from javaScript using the example code in Git Hub doc (https://github.com/blade-ui-kit/blade-icons#deferring-icons) it does not show anything. Here is my example code:::

Blade Code:::

   <section hidden class="hidden">
      <x-icon name="iconsax-bro-key" defer='bro-key'></x-icon>
    </section>
    <section class="iconplace"></section>

Javascript Code::::

  var loadIcon = <svg><use href="#icon-bro-key"></use></svg>;
  $(".iconplace").html(loadIcon);
  console.log(loadIcon); // Given the systex error (Uncaught SyntaxError: Unexpected token '<')

  var svg = document.createElement("svg");
  var use = document.createElement("use");
  use.setAttribute("href","#icon-bro-key");
  svg.appendChild(use);
  document.querySelector(".iconplace").insertAdjacentHTML('afterbegin',svg); // Not working - [object HTMLUnknownElement]
  console.log(svg);

  var iconStore = `<svg><use href="#icon-bro-key"></use></svg>`;
  $(".iconplace").html(iconStore); // Not working - didn't show anything
  console.log(iconStore);