import external CSS file into JavaScript innerHTML [duplicate]

Question

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.

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
– Sterling Archer, Commented Jan 30, 2023 at 16:50
@FriedBrain <i> is the idiomatic tag (italics). I don't believe that to be relevant to this issue — Sterling Archer
– Sterling Archer, Commented Jan 30, 2023 at 16:53
stackoverflow.com/questions/2592092/… could you go through this it will work? — PK2995
– PK2995, Commented Jan 30, 2023 at 17:02

Adarsh Gupta · Accepted Answer · 2023-01-31 06:57:23Z

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/[email protected]/dist/ionicons/ionicons.esm.js"></script>
  <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js">
  </script>
</body>

</html>

answered Jan 31, 2023 at 6:57

Adarsh Gupta

557 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

import external CSS file into JavaScript innerHTML [duplicate]

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related