The Tag Icons official theme component enables icons to appear next to tag labels, supporting both default and box tag styles. It utilizes FontAwesome 6 icons and allows custom configuration via a comma-delimited list of tag slugs, icons, and optional colors. Users can also register custom SVG icons via plugins or themes.
Key discussions include:
Custom Icons & Colors: TheBestPessimist confirmed custom SVGs work with plugin registration. pmusaraj clarified that custom icons added via themes/plugins are automatically available. AntiMetaman asked about changing tag box colors, to which pmusaraj provided CSS examples for specific tags, though noted the lack of a native admin panel option for bulk color changes. TheBestPessimist shared a CSS mixin solution to sync bullet tag colors with icons and hide bullets when icons are present.
Tag Groups & Dropdowns: davidkingham and renato inquired about displaying icons in the tag dropdown menu. pmusaraj confirmed this requires a core change, as the current renderer isn’t used in the filter dropdown, and noted a PR was submitted to address this.
Emojis: sebastianh and sunjam explored using emojis as tag icons. pmusaraj explained that since the component uses icon sets, emojis must be embedded directly into the tag label (e.g., using a dash separator), as the component itself does not render emojis.
Troubleshooting: Users reported issues with settings truncation (pmusaraj) and icons only appearing in the sidebar (Darojax). Arkshine and pmusaraj discussed CSS overrides for specific icon sizing issues and updates needed for core changes.
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?
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?
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
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.
(The default tag icon is still here)
but I could probably live with it. Might even be worth trying a tag that is just a flag emoji…