 |
Summary | Tag Icons allows tags to have an icon next to the tag label. |
 |
Repository Link | https://github.com/discourse/discourse-tag-icons |
 |
New to Discourse Themes? | Beginner’s guide to using Discourse Themes |
Install this theme component
Here is an example of how this would look, with tag style set to the default (simple):
Here is how this looks with tag style set to box:
Configuration is pretty straightforward:
See also the Category Icons component, which does the same thing for categories.
Does this also work with custom svg?
Yes, but you would need to register the custom SVG in a plugin (themes should soon also be able to add custom icons to the SVG sprite set). See Introducing Font Awesome 5 and SVG icons for details.
Now that custom icons in themes has been merged is it possible to use FA Pro icons with this or does the component need to be updated?
Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.
This allows one to add custom icons to tag, but what if I wanted to change the color of the box of the tag?
You can do that with CSS, for example, the code below will set the “theme-component” text color to red:
.extra-info-wrapper .discourse-tag[data-tag-name="theme-component"] {
color: red !important;
}
(This is just for illustrative purposes only, you’ll need to figure out your own CSS.)
I see thanks. I just have to list every tag I have in the CSS by name and specify the color. Would be nice though if I could do this from the admin panel like with the theme components using a comma separated list and providing the hex code just like for the icons.
Is there a way I can set a color for all tags in a tag group via CSS?
I ended up getting something like this: 
(The default tag icon is still here)
Does anyone see this kind of result?
Look for “tag style” in your site settings, and change it to simple, that will remove the grey bullets.
I see, thanks, but I will need the default grey bullets for all other tags. I achieved this by remove that bullets for specific tag:
a[data-tag-name="test1"]::before {
display:none!important;
}
Looks like a fantastic tweak. Question for advice to the author: I am thinking of pimping my bland tags, some of which I use to tag posts by language (so I have tags “castellano”, “deutsch” etc.), with little country flags. Would uploading a custom .svg as described above be the way or are there preconfigured iconsets or maybe discourse-built-in emoji-sets that could be used?
An emoji would make sense for country flags, but this component does not use emojis, it uses icons from an icon set like Font Awesome.
You can try adding the emoji directly in the tag label. I tried this locally, and the tricky thing is that tags can’t have spaces. An example:
If you are ok with the dash, that’s the way to go.
Oh wow that is actually rather neat. Minus the dash 
but I could probably live with it. Might even be worth trying a tag that is just a flag emoji…
Yes, just an emoji is cool… but you won’t be able to easily find that from a search in the tag dropdown (when posting).
Ok just one more semi-stupid question: how do I get the emoji to work as you did above with the francais? I tried creating a tag ":sweden:-svenska" but it doesn’t translate to the swedish flag
You need to use an emoji symbol (on mobile, for example, you would switch to the emoji keyboard).
Ohhhh I thought the emojis in Discourse. Okay, need to switch to a mobile then. I thought I could somehow use these. It worked thanks!
If I understood it right there isn’t an easy way of discovering the group a tag belongs to within the tag renderer?
This one would be great. I was using a custom CSS approach before and ditched it for this theme component with a fallback icon for all non-set tags (at least before the support for tag groups) and this is the one thing I miss.
Considering discourse-category-icons supports this, I’m guessing the renderer that replaceCategoryLinkRenderer replaces is used by the category dropdown while the renderer replaceTagRenderer replaces is NOT used by the tag dropdown, right? So maybe this would need a core change? The tag dropdown on the composer is using the replaced renderer, with icons.