How to add a gradient to your icons

It looks like a simple task but it's not.
But don't worry, it's not hard either, it's just not very convenient.

First, you need to know that when you are using the Icon element in Oxygen, it will insert the SVG code directly in the html page. Just like this:

Changing the color of a SVG is very simple. We can do it directly in Oxygen, or with a simple line of CSS.
But it's not possible to add a gradient to a SVG in CSS.
It must be done directly inside the SVG code, like this:

By chance, we can still solve this problem easily but we have to follow several steps:

Step 1

First, go to this page and create your nice little gradient:

https://angrytools.com/gradient/

Step 2

Select the SVG tab and copy the gradient element (it starts by 'linearGradient' or 'radialGradient')

Step 3

in a Code Block, paste the code in the HTML tab and add the first and last line (in red):

<svg width="0" height="0">
<linearGradient id="lgrad" x1="50%" y1="100%" x2="50%" y2="0%" >
<stop offset="0%" style="stop-color:rgb(255,255,255);stop-opacity:1" />
<stop offset="100%" style="stop-color:rgb(0,22,69);stop-opacity:1" />
</linearGradient>
</svg>

Notice the id of the Gradient : id="lgrad". We need it for the last steps.

Step 4

In the same Code Block, create a new CSS class, and use the gradient's ID for the url:

.gradicon svg {
	fill: url(#lgrad);
}

Step 5

Add an icon and add the class you just created:

Now you can add as many gradients as you want.
You just need to change the default ID, and create new classes.