Trying to create an icon font awesome inside JS

I am trying to create a font awesome icon next to the list item, but it keeps giving me [object HTMLElement] any Idea why ?

//The icon add classes

const fas = document.querySelector(".fas");
const ul = document.querySelector("ul");
const input = document.querySelector("input");

//Grab the input
fas.addEventListener("click", () => {
  const li = document.createElement("li");
  const inputValue = input.value;
  const icon = document.createElement("i");
  icon.innerHTML = "hey";
  li.innerHTML = inputValue + icon;

  console.log(icon);
  if (inputValue == "") {
    return;
  }
  ul.appendChild(li);
  input.value = "";
});

Thank you

Answer

The right way to insert your icon is not

li.innerHTML = ...

You should use li.appendChild(icon) instead. You can do the same with a textnode for your input text 🙂 Here’s my example, hopefully this is what you wanted : https://codepen.io/LENNY74/pen/dyNVVKa