Почему градиент в svg странно накладывается?
Надо использовать значение userSpaceOnUse для gradientUnits.
<linearGradient gradientUnits="userSpaceOnUse" ...>

Когда вы пишите <svg class="inline-svg-icon" fill="url(#red-blue)"><use...> по сути каждый элемент просто наследует этот атрибут fill. И по умолчанию градиент рисуется в границах элемента. Если же указать userSpaceOnUse, то градиент будет рисоваться в пределах текущего viewport.

https://codepen.io/alexeyten/pen/rNLQKbm?editors=1000
fill применяется к каждому svg-объекту по отдельности, поэтому получается такой эффект. 
Думаю, одним из самых простых решений будет использование маски. 
То есть создаете один большой объект, который заливаете градиентом, а саму svg используете как маску для этого объекта.