Tag Icons

[Discourse]

	Summary	Tag Icons allows tags to have an icon next to the tag label.
	Preview	Preview on Discourse Theme Creator
	Repository Link	https://github.com/discourse/discourse-tag-icons
	New to Discourse Themes?	Beginner’s guide to using Discourse Themes

Install this theme component

As this is an official theme component maintained by the Discourse team, Support, Bug, UX, and Feature requests can be made in the respective categories here on Meta, and tagged with the appropriate theme component tag. Click on a link below to get one started.

 Support  Bug  UX  Feature

Features

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:

Settings

Name	Description
tag icon list	Enter comma-delimited configuration for tags, in the format “tag-slug,icon,iconColor”. Icon color is optional.
svg icons	List of FontAwesome 6 icons used in this theme component

See also the Category Icons component, which does the same thing for categories.

Hosted by us? Theme components are available to use on our Standard, Business, and Enterprise plans.

Last edited by @Lilly 2024-10-10T13:54:25Z

Check document

Perform check on document:

[TheBestPessimist]

Does this also work with custom svg?

[pmusaraj (Penar Musaraj)]

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.

[davidkingham]

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?

[pmusaraj (Penar Musaraj)]

Component doesn’t need to be updated, if you add custom icons via theme/plugin they will be available to the component.

[davidkingham]

Could the icon be added to the dropdown menu as well?

[AntiMetaman]

This allows one to add custom icons to tag, but what if I wanted to change the color of the box of the tag?

[pmusaraj (Penar Musaraj)]

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.)

[AntiMetaman]

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?

[HeyRR]

I ended up getting something like this: (The default tag icon is still here)

Does anyone see this kind of result?

[pmusaraj (Penar Musaraj)]

Look for “tag style” in your site settings, and change it to simple, that will remove the grey bullets.

[HeyRR]

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;
}

[sebastianh (Rebastion)]

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?

[pmusaraj (Penar Musaraj)]

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.

[sebastianh (Rebastion)]

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…

[pmusaraj (Penar Musaraj)]

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).

[sebastianh (Rebastion)]

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

[pmusaraj (Penar Musaraj)]

You need to use an emoji symbol (on mobile, for example, you would switch to the emoji keyboard).

[sebastianh (Rebastion)]

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!

[renato (Renato Atilio)]

@pmusaraj

The tag groups feature is a nice-to-have for sure, it is a bit tricky and currently I don’t have the time to work on it.

If I understood it right there isn’t an easy way of discovering the group a tag belongs to within the tag renderer?

@davidkingham

Could the icon be added to the dropdown menu as well?

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.