Category Icons

Thanks all of you for this amazing component.

Do you think it could be adjusted to work with the Event Plugin calendar ? So it would display the colored icons instead of bullets inside the calendar (which would make it very neat and easy to read !)


Another rebuild fixed the problem, quite odd! Thanks as always Penar!


what does “icon” stand for in settings?

Is it exact name of some icon from svg site? How do I get the exact name?

1 Like

That could indeed be a great improvement!

1 Like

I think I have a problem on my forum as the icons are specified as white, while background is white on categories page

Could I enforce different background here, as it is used for subcategories?


I’m looking at the code and trying to fix the following two issues, but I’m stuck on the second one.

Category icon list is not applied in category view (with Show subcategory list above topics in this category)


I managed to fix this one by replacing line 112 in header.html

      if(iconItem && !attrs.category.parent_category_id) {


      if (iconItem) {

and adding the following code to common.scss

.subcategory .category-icon-widget {
  display: none;


Category lock icon next to category doesn’t change to new svg

Categories view:

Category view (with Show subcategory list above topics in this category):

I think this is the relevant code:

    let classNames = "badge-category clear-badge";
    if (restricted) {
      classNames += " restricted";

    html +=
      `<span ${style} ` +
      'data-drop-close="true" class="' +
      classNames +
      '"' +
      (description ? 'title="' + escapeExpression(description) + '" ' : "") +

which adds restricted class to a <span> with classes badge-category clear-badge which controls the subcategory lock icon display, but I cannot figure out how to also apply this to <div> with class category-text-title which controls category lock icon display.

Please help @pmusaraj @tshenry


Any chance that it will anytime soon? For some reason the categories boxes view also doesn’t display the colour blob or the lock icon so it might be outside this component’s control…

1 Like

I’m still not able to “figure out” what is wrong with the color,
Someone can help me where I was wrong?

and the result

1 Like

Bug @pmusaraj
Sub-Category slugs (and titles) only have to be unique within their parent category

But slugs are used as the key to find the icon in this component.

Thus if you have two subcategories under different parents that have the same slug the icon is applied to both of them.

To be honest I think this is actually a Discourse problem as slugs should be unique across the whole discourse instance, but they are not.

Is it even possible to fix this within the component?

1 Like

I don’t understand why the slugs need to be globally unique when, AFAIK, they never have a global scope. Can you explain?

P.S. I see your new topic which asks the question why they aren’t unique.

1 Like

The Category Icons Component for example uses the slug to identify the category to which the icon has to be attached.
How is an admin or user to uniquely identify a subcateogry? - do they have to use the path parentcategory-subcategory? (or parent-child-grandchild when that enhancement gets released). This seems a bit cumbersome.


It is likely possible to have the component deduplicate subcategories with the same slug under different parents but it would require some way to pass the parent category slug in the component’s settings. IMO it would not be too elegant.

Can you try changing the slug for one of the two categories that have the same slug? Is there a reason you can’t do that (just the slug needs to change, not the category name)?


Yep, that seems to be the way to go given that sub-category slugs in different parent categories do not not have to be unique.

Having said that, it can actually be turned to advantage as a feature. For example if you have group based categories many of which have a help and announcement forums as subcategories then you can easily set up a common help icon for all the help categories and a common icon for all announcement categories using just two entries. And any new subcategories with the help tag would pick up the icon automatically.

For our use I have taken this one stage further and actually made it an option for a partial match on the slug so that an entry “help,question-mark,#000080,false” would match “sw-help” and “help-forum” and “helpdesk”.

The “false” additional item on the end of the entry tells it not to enforce an exact match.

I also have the option to specify the colour as “catcol” in which case the icon will pick up the category colour instead of using a separate specified one.

Two suggestions for inclusion in an update for you.


I think the component used a partial match at some point, and it was confusing to some users who wanted an icon for “book” but not for “booking”. But with the option to turn this on/off per setting, this would be nice. (Maybe you could use partial-match instead of false as the last item, would be easier to understand.)

That’s a nice addition.

I would be happy to review a PR for either of these features. Thanks!

5 Likes has been merged, thanks @rogerco!


I’ve come up against a minor issue for the category colour option if the settings are using bullet or boxes rather than bars - I only created it for the bars option in the settings and it falls back to grey in the other options. Fixable largely in css I think but haven’t cracked it yet - I will!


Thanks for this great theme @pmusaraj! :raised_hands:

I would like to use the COMMENTS icon but am not a huge fan of the solid version. When I use comments I get the solid version. The solid version is typically served up as “fas fa-comments
What if I would like to use is the regular version which is typically served up as “far fa-comments

Out of the following variations, there are some that require the paid subscription. Is there a way to select different variations or is the solid version the only one available?


I added to my theme, as follows:

how do I now add this to the theme settings? Here’s what I tried to do…


Use “far-comments” in both settings, like this:

The paid versions aren’t publicly available so we can’t include them in Discourse. If their license permits, you can add them in a custom SVG sprite in your theme. Full instructions for that are in the Introducing Font Awesome 5 and SVG icons, read carefully the section “Adding custom icons”.


Thank you for the help with this! Adding far-comments to both areas worked perfectly!

Can you take a quick look at this other question I asked (in response to another one of your comments in this topic)…

1 Like