How to set gradient for SVG on hover?

Question

css

There is an instagram icon - initially it is white.
But when you hover over it, a gradient with smooth animation should be applied.
I found in Google only how to initially put the gradient. And these are very cumbersome solutions, I expected that everything is simple with SVG.
SVGs are inserted via use

Answer 1

https://jsfiddle.net/7zdoosp9/2/

Answer 2

One icon on top of another and change the transparency of the top one.

Answer 3

In general, I created a gradient on the page:

<linearGradient id="instagrad" x1="0" y1="100%" x2="100%" y2="0">
            <stop class="stop stop--1"
                  stop-color="#febb26"
                  offset="0"></stop>
            <stop class="stop stop--2"
                  stop-color="#f74e0b"
                  offset="33%"></stop>
            <stop class="stop stop--2"
                  stop-color="#de003d"
                  offset="66%"></stop>
            <stop class="stop stop--3"
                  stop-color="#c0019e"
                  offset="100%"></stop>
        </linearGradient>

For svg on hover I applied:

&:hover {
  svg {
    fill: url(#instagrad);
  }
}

The problem is that the color change animation does not work.