JavaScript icon pack won't fetch/download in Google Chrome (icons won't show)

Question

I'm having this frustrating issue only on Google Chrome that it won't download my icon pack. The pack I'm using is ionicon which is pretty straightforward considering its documentation. I followed the documentation carefully and the pack is working fine with most of the browser but chrome won't show any icon

Here is my footer that has just three icons.

    <footer>
  <div class="footer">
    <ul class="footer-lists">
      <li>
        <a class="icon" href="#"
          ><ion-icon name="logo-twitter"></ion-icon
        ></a>
      </li>
      <li>
        <a class="icon" href="#"
          ><ion-icon name="logo-instagram"></ion-icon
        ></a>
      </li>
      <li>
        <a class="icon" href="#"
          ><ion-icon name="logo-youtube"></ion-icon
        ></a>
      </li>
    </ul>
  </div>
</footer>

Answer 1

<script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>

you must add the script after title tag