Add icon from SVG sprite to Bootstrap popover-CodePudding

I need to insert an SVG icon into a popover. I do it like this (see code below). What am I doing wrong? There was a similar problem with selectpicker, but everything was solved there by adding the svg tag to the "white list". Please tell me how to solve this issue.

let $popover = $('#popover_btn');

$(function() {
  $popover.popover({
    html: true,
    template: `<div >
        <svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
          <g clip-path="url(#clip0)">
          <path d="M28 11.094V23.5C28 24.875 26.875 26 25.5 26H2.50002C1.83755 25.9982 1.20274 25.7342 0.734297 25.2657C0.265856 24.7973 0.00187062 24.1625 2.34375e-05 23.5V11.094C0.469023 11.61 1.00002 12.063 1.57802 12.453C4.17202 14.219 6.79702 15.984 9.34402 17.844C10.657 18.813 12.282 20 13.985 20H14.016C15.719 20 17.344 18.812 18.657 17.844C21.204 16 23.829 14.219 26.438 12.453C27.0081 12.0598 27.5324 11.6039 28.001 11.094H28ZM28 6.50002C28 8.25002 26.703 9.82802 25.328 10.781C22.89 12.468 20.437 14.156 18.015 15.859C16.999 16.562 15.281 18 14.015 18H13.984C12.718 18 11 16.563 9.98402 15.859C7.56202 14.156 5.10902 12.468 2.68702 10.781C1.57802 10.031 -0.000976562 8.26502 -0.000976562 6.84302C-0.000976562 5.31202 0.827023 3.99902 2.49902 3.99902H25.499C26.858 3.99902 27.999 5.12402 27.999 6.49902L28 6.50002Z" fill="black"/>
          </g>
  <defs>
  <clipPath id="clip0">
  <rect width="28" height="28" fill="white"/>
  </clipPath>
  </defs>
  </svg>

      <div >Some text</div>
    </div>`
  })
})

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI N" crossorigin="anonymous">

<button id="popover_btn" type="button"  data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>

The sandbox is here.

P.S. In the example it's just SVG because the sprite is not displayed from external resources, but I don't know how to upload the file here.

CodePudding user response：

I actually think bootstrap filters the HTML it allows to be rendered in a popup. You can somewhat work around that by trigger an event after popup is shown.

$popover.on('shown.bs.popover', function() {
  // Add svg here
});

I have adjusted your script to do this here: https://codepen.io/familjenpersson/pen/QWxyaYy