Ícones

Estava estudando aqui sobre ícones e me veio uma dúvida quando me deparei com diversos meios de inserção dos ícones nas páginas, as vezes percebi a utilização dos pseudo-elementos ::before/::after com a utilização do content:'' , e por outro lado percebi que as vezes não utilizam esses pseudo-elementos. Gostaria de saber quando utilizar um ou outro, isso tem diferença?

Vou deixar alguns exemplos aqui para vocês entenderem melhor:

SEM UTILIZAÇÃO DO PSEUDO-ELEMENTO:

<ul class="lista-item">
                    <li class="item">
                        <span class="item__icone item__icone--cursor"></span>
                        <p>Escolha suas plantas</p>
                    </li>
                    <li class="item">
                        <span class="item__icone item__icone--carrinho"></span>
                        <p>Faça seu pedido</p>
                    </li>
                    <li class="item">
                        <span class="item__icone item__icone--caminhao"></span>
                        <p>Aguarde na sua casa</p>
                    </li>
</ul>

.item__icone{
    display: block;

    margin-right: 1rem;

    width: 3.25rem;
    height: 3.25rem;

    border-radius: 50%;

    background-color: var(--amarelo);
    background-size: 1.375rem;
    background-repeat: no-repeat;
    background-position: center;
}

.item__icone--cursor {
    background-image: url(../../img/icones/mouse.svg);
}

.item__icone--carrinho{
    background-image: url(../../img/icones/cart.svg);
}

.item__icone--caminhao{
    background-image: url(../../img/icones/truck.svg);
}

COM UTILIZAÇÃO DE PSEUDO-ELEMENTO:

<nav class="menu-lateral">

 <a href="index.html" class="menu-lateral__link menu-lateral__link--inicio menu-lateral__link--ativo">Início</a>
 <a href="#" class="menu-lateral__link menu-lateral__link--videos">Vídeos</a>
 <a href="picos.html" class="menu-lateral__link menu-lateral__link--picos">Picos</a>
 <a href="#" class="menu-lateral__link menu-lateral__link--integrantes">Integrantes</a>
 <a href="#" class="menu-lateral__link menu-lateral__link--camisas">Camisas</a>
 <a href="#" class="menu-lateral__link menu-lateral__link--pinturas">Pinturas</a>
</nav>

.menu-lateral__link::before {
    content: "";
    width: 24px;
    height: 24px;
    font-size: 24px;
    position: absolute;
    left: 24px;
}

.menu-lateral__link--inicio::before {
    content: "\e902";
}

.menu-lateral__link--videos::before {
    content: "\e90e";
}

.menu-lateral__link--picos::before {
    content: "\e909";
}

.menu-lateral__link--integrantes::before {
    content: "\e903";
}

.menu-lateral__link--camisas::before {
    content: "\e900";
}

.menu-lateral__link--pinturas::before {
    content: "\e90a";
}