Почему svg иконки с одинаковыми стилями отображаются по разному?

Question

[Rimidbit]

Делаю учебный сайт. Работаю в шторме при помощи проф. сборки, которая в итоге выдает один svg файл.
В базовом css прописал такие стили для иконок

.site-icon {
    display: inline-block;
    width: 1em;
    height: 1em;
    stroke-width: 0;
    stroke: currentColor;
    fill: currentColor;
}

Класс site-icon прописал у всех иконок, но 2 из них как будто его не видят. Одна мизерная (смартфон), другая гигантская (корзина). На кнопке поиска вообще не отображается, а в строке "хлебные крошки" отказывается краситься. Думал где то накосячил в коде, подставляю id другой иконки, отображается как надо. Думаю проблема с самими иконками, но где искать ошибку не представляю

https://rimidbit.github.io/retroclimate/ - паблик
https://github.com/rimidbit/retroclimate.git - файлы
https://github.com/rimidbit/retrocklimat-source_co... - исходники

Может кто знает секрет

Comments

[Moskus]

Скорее всего, проблема в SVG.

Answer 1

[RAX7]

• У иконки #search не правильно прописан xlink:href
  
• у #home убрать fill в svg, что красился в css
  
• иконки #smartphone_icon1 нет в спрайте
  
• что такое строка "хлебные крошки" вообще не понял
  

Comments

[Rimidbit]

в коде самой #home не нашел атрибута fill
иконку #smartphone_icon1 заменил на #smartphone, проблема осталась. иконка мизерная, при увеличении размера растет и отступ справа.
иконка #shopping-cart гигантского размера.

Answer 2

[Максим]

Вы если SVG покажите то станет яснее о чём речь