0

I have created a webpage using the InnerHtml function in JavaScript. I now want to import some icons into this JavaScript file.

These icons have come from an external site, which contains a CDN link.

How could I do this?

I have tried to write the CDN link inside the tags of the InnerHTML function, as well as in the HTML part of the InnerHTML function. However, neither way imports the icons correctly.

tyktky
  • 1
  • 1
    Can you please show us the code that isn't working, along with any debugging you've tried? This will help us get a better picture of your issue, and possibly get a better answer. – Sterling Archer Jan 30 '23 at 16:50
  • Have You tried the –  Jan 30 '23 at 16:51
  • @FriedBrain `` is the idiomatic tag (italics). I don't believe that to be relevant to this issue – Sterling Archer Jan 30 '23 at 16:53
  • https://stackoverflow.com/questions/2592092/executing-script-elements-inserted-with-innerhtml could you go through this it will work? – PK2995 Jan 30 '23 at 17:02

1 Answers1

0

You can use <ion-icon></ion-icon> and specify the name in it like

<ion-icon name="home-outline" class="home-icon"></ion-icon>

Note: It works with ion-icons package only.

Simple example:

* {
  box-sizing: border-box;
}
<html>

<head>
</head>

<body>
  <div class="container">

    <ion-icon name="home-outline" class="home-icon"></ion-icon>

  </div>

  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js">
  </script>
</body>

</html>
Adarsh Gupta
  • 55
  • 7