Как лучше реализовывать текст с иконкой?

Question

[Denis1205]

Как правильнее или валиднее написать вот такую кнопку, вопрос именно про то как лучше вставить иконку:

Через псевдоэлемент ::before, то есть как то вот так:

<a class="header-naw__item btn btn--pink" href="/">
    <span class="icon icon--sign">Sign up</span>
</a>

.icon{
    position: relative;
    padding-left: 32px;
}
.icon::before{
    content: "";
    position: absolute;
    width: 20px;
    height: 20px;
    left: 0;

}

.icon--sign::before{
    background: url("./assets/img/icons/User.svg") no-repeat center left;
}

Или же лучше:

<a class="header-naw__item btn btn--pink" href="/">
    <img src="path" alt=""> Sign up
</a>

Ну или какой то другой вариант

Comments

[Ankhena]

img - это контентное изображение, а иконки это просто украшения и вставляются через css.
Если абсолютом, то span внутри не ясно зачем.
Он нужен при использовании флексов и гридов если в тексте есть ещё теги, span, b, br и т.д.

[Александр Васильев]

можно так

<a class="" href="">
    <svg class="someclass">
        <use xlink:href="sprite.svg#someid"></use>
    </svg>
    <span>some text</span>
</a>

span в принципе лишний

[Ankhena]

Александр Васильев, зачем бы это тащить в разметку при наличии svg stack или кастомных или инлайном в css и масок.