За 7 лет работы я не встречал этот вариант использования на фрилансе и в компаниях, поэтому ваш комментарий очень полезен к данному посту, спасибо?

В общем, иконки разные попадаются. Всё зависит от вас и проекта

Я не говорю, что вариант плохой) Я говорю, что есть другие варианты, которые, как по мне, лучше.

Касательного первого способа. Внутри svg может быть и path, и polygon, и circle и т.п. И бывает, что внутри них тоже бывает задан цвет с помощью fill. Из-за этого нам приходится делать что, то типа:

.icon,
.icon path,
.icon circle,
.icon polygon {
    fill: coral !important; /* и даже это не всегда срабатывает */
}

Тут и important постоянно придётся писать, и код какой-то костыльный сам по себе?