Does Discourse accept SVG icons with Gradient?

[Arkshine]

You can use this trick to make a gradient on SVG icons:

How do I put gradient on thin icons?

Hi, From what I read in Gradients in SVG - SVG: Scalable Vector Graphics | MDN, you must add <linearGradient> to the SVG. Others resources: Gradient fills for SVG icons SVG Gradients What you can do is create a hidden SVG in your theme/component to define your gradients: <svg aria-hidden="true" focusable="false" style="width:0; height:0; position:absolute;"> <linearGradient id="my-gradient-1" x2="0" y2="1"> <stop offset="0%" stop-color="var(--color-stop-1)" /> <stop offset="50%" …

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.