I attempted to create a button with both text and an icon. Initially, I tried doing it in HTML.
<button>
<img src="img/favicon.png" alt="Image" width="30px" height="30px" >
Button Text
</button>
Next, I attempted to achieve the same using TypeScript.
const btn = document.createElement("button");
const img=document.createElement("img");
img.src=`img/${favicon.png}`;
btn.appendChild(img);
btn.textContent=label;
However, after adding the label, the icon disappeared.
My current solution involves:
const btn = document.createElement("button");
const img=document.createElement("img");
img.src=`img/${favicon.png}`;
btn.appendChild(img);
const span=document.createElement("span");
btn.appendChild(span)
span.textContent=label
...
Unfortunately, this solution has resulted in other issues. Is there anyone who knows of a better alternative? I prefer not to rely on external libraries like awesome icons.