Pra eu saber se o ícone vai ficar no HTML ou CSS, eu me faço a seguinte pergunta: Se não tiver este link aqui no meu site, o usuário vai saber do que se trata esse botão/informação (ou qualquer outra coisa que tenha um ícone) ? Caso a ausência do ícone gerar alguma dúvida sobre o que o botão faz, ou do que se trata a informação, então é conveniente colocar no HTML.
Outro ponto que analiso no layout do projeto: As vezes temos um ícone acompanhado de um texto, por exemplo um botão escrito Menu, com um ícone junto. Neste caso, talvez em um primeiro momento, seja apenas uma ilustração, e pode ser colocado no CSS, já que o texto Menu deixa claro sobre a funcionalidade do botão. Mas e se no layout mobile, onde a resolução fica menor, seja interessante eu remover o texto Menu, e deixar apenas o ícone, para ocupar menos espaço? Então neste caso, o ícone tem uma relevância, então coloco no HTML.
Se você é iniciante, no começo vai ser difícil mesmo diferenciar, mas com o tempo e prática, vai ficando mais natural estes pontos, mas respondendo a sua pergunta se é muito importante separar, eu diria que sim, por questões de boa prática, manutenção futura no código, e também acho importante já ir tentando fazer isto mesmo no começo da aprendizagem, para ir treinando. Espero ter ajudado, tudo o que eu disse é com base em ensinamentos que obtive aqui na Alura e em outros lugares, talvez algumas coisas passaram batido, mas no geral é isto.
