Unable to alter the lock icon in category boxes

[nathank (Nathan Kershaw)]

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:

.

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.

[Johani (Joe)]

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

UX: allow themes to easily change in the lock icon in category-boxes

UX: allow component to change lock icons in category boxes

[nathank (Nathan Kershaw)]

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.

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>

[Johani (Joe)]

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?

[nathank (Nathan Kershaw)]

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">

[Johani (Joe)]

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/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

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.

[nathank (Nathan Kershaw)]

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

Source is:

[Johani (Joe)]

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?

[nathank (Nathan Kershaw)]

@Johani

Can you try deleting the component and installing it again?

Well, that worked!!!

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.