Why svg icons don't follow styles?

Question

Icons

Good day!
Faced with naughty svg icons. The site has more than 20 icons, all set to a basic style

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

Crazy 4 icons:
2 - arrow-down and home do not want to change color,
2 others - shopping-cart and smartphone perform miracles with sizes (the first is giant, the second is tiny).
You can see everything with your own eyes here
public https://rimidbit.github.io/retroclimate/
archive https://github.com/rimidbit/retroclimate.git
separately 4 icons https://drive.google.com/open?id= 1us4MmUjB-G0_rPol...
If you know, respond. I really want to understand the reasons.

Answer 1

https://codepen.io/topicstarter/pen/XoqoMK - it works if you quail according to the rules
, your main problem is that the styles are stroke-width and stroke and fill are specified inline in svg and therefore you can kill it only by writing any rule in css with important