h1::before {
content: "";
background-image: url(http://via.placeholder.com/50x50);
display: inline-block;
width: 50px;
height: 50px;
}
Если увеличивать width или height, то картинка повторяется.
Как можно отключить повтор?
background-size: cover;
background-position: center;
background-repeat: no-repeat;
<span id="icon"></span>
, о том как это сделать можно посмотреть здесь Add Element . А потом либо с помощью jquery очистить элемент списка и добавить в него созданый элемент, либо просто в inner его присвоить.