You can use this trick to make a gradient on SVG icons:
You create an invisible SVG where you define all your gradients associated with an id (e.g.: <linearGradient id="my_id"...)
Then, in your CSS, you target SVG icons and use fill: url(#my-id)
I’m not sure how much it’s ugly, but it works. 