Listing-widget icons not loading using <div> integration

As an 3rd party web integration company (Verb Interactive), I would like to integrate the Footlight listing-widget using a <div>instead of iFrame into my customer's website (Destination Canada). When I use the following html, the icons (about 8 icons) do not appear because they are using a relative path.

How can the icons be made to appear without having to copy them to the customer's website?

Also <div id="calendar-widget">should be <div id="footlight-listing-widget"> to be consistent with listing-widget.footlight.io and have a namespace incase there is another listing-widget.

<html>
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>DIV Example</title>
    <link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">

    <!-- widget -->
    <script defer="defer" src="https://listing-widget.footlight.io/static/js/main.7b7ac7ad.js"></script>
    <link href="https://listing-widget.footlight.io/static/css/main.bf1be2a3.css" rel="stylesheet">
  </head>

  <body style="margin:20px">
    <h1>Destination Canada Test</h1>
    <div id="calendar-widget" 
      data-api="api.footlight.io" 
      data-calendar="nac" 
      data-locale="fr"
      data-color="#fc6060"  
      data-limit="6"
      data-height="600px" 
      data-search-events-filter="" 
      data-font="Roboto"
      >
    </div>
    <footer>
      <p>Destination Canada Footer</p>
    </footer>
  </body>

</html>

culturecreates / footlight-calendar-widget

Listing-widget icons not loading using <div> integration #41