Issue using custom icon with Tag Icons

[kristof_mulier]

Hi @pmusaraj ,
I’ve installed the Tag icons theme component. These are my current settings:

I’ve defined three tags that are attached to a Font Awesome icon:

• bug-showstopper attached to skull-crossbone
• bug-major attached to exclamation-triangle
• bug-minor attached to exclamation-circle

This works just fine. However, I try to attach the fourth tag beetle to my uploaded svg-file beetle-face.svg. Unfortunately, this doesn’t work.

How do I attach my own svg-file to a tag properly? Please help me step-by-step. I’m really a beginner here on discourse (just started today) and I have limited background in web technology.
Thank you very much

[pmusaraj (Penar Musaraj)]

Hi @kristof_mulier, welcome to Discourse!

Here is how you can add a custom icon:

@pmusaraj

Adding custom icons

If you would like to have more icons than what’s available in FontAwesome, you can add your own SVG icons in a plugin or a theme. See this SVG sprite for an example of how to structure your sprite. (It’s essentially a list of <symbol> elements, each with its own unique ID.)

In themes and components : add the SVG sprite in the /assets folder, and reference it in about.json using the variable name icons-sprite . For a sprite called my-icons.svg , your assets.json should include this:

"assets": {
   "icons-sprite": "/assets/my-icons.svg"
}

You can also add the SVG sprite to a theme or component via the UI, when doing so, make sure the SCSS var name is set to icons-sprite . Screenshot:

Basically, you need to add the SVG icon to a sprite, give it an ID and then add the sprite to the theme and set the var name for it to icons-sprite. Once that’s done, you can use the ID of the icon like the FA icon ids (and don’t use the $ symbol).

[kristof_mulier]

Wonderful, this worked like a charm!
Thank you @pmusaraj !
You’re awesome