How to use a custom SVG like icon in the Reactions plugin?

[ckshen]

Regarding the ability to customize the Like icon, i know from some of the earliest discussions we are instructed to only pick icons that have the ‘regular’ version (unliked) and the ‘solid’ version (liked) readily available.

Our forum has used an substitute Like icon (knife and fork- yes we are a food forum) for years, where the solid version is available in FontAwesome Free, but the regular version is only in Pro. It doesn’t make sense for us to pay $99 for the Pro plan for just one icon. Question is, are we able to upload our own SVG for the customized icon? Has anyone done it successfully?

I tried doing that, but no icon shows up. Hence the question. Thanks.

[Lilly (Lillian)]

Replace Discourse's default SVG icons with custom icons in a theme

You can replace a Discourse’s default SVG icons individually or as a whole with your own custom SVG and override them within a theme or theme component. Step 1 - Create an SVG Spritesheet To get started, you must create an SVG Spritesheet. This can contain anything from a single additional custom SVG icon up to an entire replacement set of hundreds. The spritesheet should be saved as an SVG file. In principle, you are nesting the <svg> tag contents from the original SVG icon file into <symbol> …

[Canapin (Coin-coin le Canapin)]

Hey ckshen,

I don’t have the answer, but it’s an interesting question.
I also noticed that it doesn’t work with many default icons. It will work with “thumbs-up” and will automatically put a filled icon when we click it, but for other icons like “wrench” or “link”, the icon doesn’t render.

It’s also worth mentioning that using the API to replace icons as it’s done here Change the Like Icon to 👍 for example seems overridden by the Reactions discourse reactions like icon setting.

[JammyDodger]

I think the Reaction code adds a ‘far’ to things, which will make them go blank if there’s no far version: