with JavaScript?

490 Views Asked by Justin Flood At 26 April 2025 at 15:14

I'm using this website https://ionic.io/ionicons to add icons to my buttons and is pretty simple with HTML when declaring a new element (that will encorporate the icon). You just have to declare a button and then put this inside it: ion-icon name="trash-outline"></ion-icon> . However I don't know how to create that icon element with javascript because I have to use .createElement at some point in order to make a button appear on the webpage. Any idea?

I tried the below and it did not work:

let dltButton = document.createElement('button');
    dltButton.innerHTML = "<ion-icon name="trash-outline"></ion-icon>";

is not an official HTML tag, is it? So I assume that is why JS can't create it.

Original Q&A

There are 1 best solutions below

Grapher1818 On 09 November 2022 at 19:25

Try the below code:

<html>
<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>
  
    <script>
        let dltButton = document.createElement('button');
        dltButton.innerHTML = '<ion-icon name="trash-outline"></ion-icon>';
        document.body.appendChild(dltButton);
    </script>
</body>
</html>

The problem might have been that your innerHTMl was double quotes and not single quotes.

Is there a way to create an element like <ion-icon name="heart"></ion-icon> with JavaScript?

There are 1 best solutions below

Related Questions in JAVASCRIPT

Related Questions in HTML

Related Questions in IONICONS

Trending Questions

Popular # Hahtags

Popular Questions