Unable to alter the lock icon in category boxes

Contribute UX

AI-generated summary

In a UX-focused discussion titled ‘Unable to alter the lock icon in category boxes,’ nathank reports that while using the Category Icons Component, the custom lock icon (unlock-alt) successfully replaces the default in subcategory titles but not in category-box-heading elements. Johani identifies that fixes are pending in two PRs — one in core Discourse and one in the component — and later confirms the component on nathank’s site is outdated, despite appearing correct. After verifying the component source and ensuring no duplicates, nathank still sees no change. Johani suggests reinstalling the component — which resolves the issue. nathank confirms the fix works and plans to replicate the reinstall on other sites, expressing gratitude for Johani’s persistent support. The root cause remains unclear, but reinstalling the component successfully applies the custom lock icon to category boxes.

1

I’ve used Category Icons to change the category locks icon to unlock-alt, which is great.

They are applied to all categories and subcategories appropriately except the category-box-heading. You’ll note that the subcategory titles have the replacement icon with no problem:

image
image278×294 15.5 KB
.

When inspecting the boxes, I note that the text for the category-box-heading is not wrapped in `category name here, and the icon assigned to it is the default one (not the one it has been changed to).

Apologies if this is actually related to the Theme Component, but I’m pretty sure it is something in core.

1 Like
2

Some of this is in core, and some of it is in the component. These two PRs should fix the issue when merged

https://github.com/discourse/discourse/pull/15309

https://github.com/discourse/discourse-category-icons/pull/9

4 Likes
Category Icons
Add category lock icons in the sidebar
3

Thanks Joe - I’ve updated both discourse and the component, but the behaviour hasn’t changed. This example is for subcategories but it is the same for boxes on the /c page.

image
image553×131 9.01 KB

When I inspect it, I can see the additional wrapping - that is in there nicely, but still the wrong lock icon:

<svg class="fa d-icon d-icon-lock svg-icon svg-string" xmlns="http://www.w3.org/2000/svg"><use href="#lock"></use></svg>
4

What commit is the site you’re seeing this issue on?

Right-click > view page source > Look for the Meta Generator tag.

It looks like this

<meta name="generator" content="Discourse 2.8.0.beta9 - https://github.com/discourse/discourse version 5e534e58973730ad43026455821966a352e8477a">

Can you share that here?

5

In betterstreets.nz, but you won’t see any locked icons unless you join (which you are welcome to do).

Here 'tis:

<meta name="generator" content="Discourse 2.8.0.beta9 - https://github.com/discourse/discourse version 1c9a0fe18e19831277fd1c1be6d28559b3bad108">
1 Like
6

The theme component is not updated on your site. I’m seeing this.

Summary 
let lockIcon = settings.category_lock_icon || "lock";

categoryTitleLink.default.reopen({
  lockIcon: lockIcon
});

when it should be

Summary 
let lockIcon = settings.category_lock_icon || "lock";

categoryTitleLink.reopen({
  lockIcon: lockIcon,
});

categoriesBoxes.reopen({
  lockIcon: lockIcon,
});

categoriesBoxesWithTopics.reopen({
  lockIcon: lockIcon,
});

Like it is here

discourse-category-icons/javascripts/discourse/initializers/category-icons.js at main · discourse/discourse-category-icons · GitHub

Head to the component page on your site and make sure that the source link is pointing to the correct repository

component source link
component source link494×310 22.9 KB

https://github.com/discourse/discourse-category-icons

Also, double check if you have multiple copies of the component installed. Check if the one that’s active is up to date.

7

Hmmm, all looks good at my end. Only one component, correct repository, activated.

image
image665×347 30.4 KB

Source is:

image

8

Not really sure at this point. Looking through the settings, I see you’re only using this for the lock icon, right? Can you try deleting the component and installing it again?

3 Likes
9

:partying_face: Well, that worked!!! :partying_face:

Thanks for your above and beyond the call of duty persistent support for me on this Joe!

I’ll now apply it to our other sites, deleting and re-installing the component each time. I’m unsure what that triggered but hey, it works.

3 Likes