Tag icons component

I use the theme component tag icons. But for some reason the tags ar and us don’t show the icon, while the config is pointing to the same logo as e.g. nl, where the logo does work.

Overview of tags: TZM Community Forum

A post with the tags set: Placeholder for the custom country tags - nl - TZM Community Forum

Overview of the theme component settings:

As you can see, ar and us are the same as nl and others that use the globe logo. But for some reason the logo does not appear there. I already rebuild and restarted the container, to make sure it’s not a cache or software version issue.

@pmusaraj and @eviltrout seem to be the maintainers? Just guessing based on Github usernames :slight_smile:

That is strange, I’m not sure why that is happening.

Can you reproduce this issue? When I create or rename tags with the globe logo, it works fine. Just not for ar and us at the moment.

No, I can’t reproduce.

Could you try it with the globe icon?

Yes, no issues with the globe icon either:

Maybe try deleting that tag and adding it again?

Removed the tags ve, us and ar. Then recreated them, only ve gets an icon again. Very strange. I also reloaded the theme component, no effect.

I’ve deleted all references to those tags and I’ll wait 48 hours to recreate them. Maybe something went wrong in Discourse to create them and perhaps a cleanup will take place after it’s unlinked for a while. Just a guess.

Still no effect… Isn’t there a debug option available?

There is no debug option, no. If you are familiar with Javascript, you can export the component, import it, and then add console.log statements to see where it’s stopped working.

One last thing I would try is to move the ar tag to the beginning of the list, mayyybe that will help.

1 Like

That does it! When ar or us is the first item in the list, the icon works. So at the moment I can only add an icon to one of them. Would this be sufficient information for you to fix it?

2 Likes

This is now fixed @AquaL1te. The issue was that the matching of tags in the theme component was incorrect, it was checking the full string of each entry for a match, and your other items, the ones with users as an icon were returning a false positive for the us tag.

If you pull the update to the theme component, you should be able to add the tags as needed.

3 Likes

@pmusaraj I have 50 or so tags that I put icons next to about two weeks ago. I check my list of tags now, and five of them don’t have icons anymore… And even if I delete them and re-enter them in, no cigar. I might try deleting all 50 of them and then re-entering them all in to see if that helps, but I wish I didn’t have to, since that’s a pain…

Can you post a screenshot of your settings pointing out the tags whose icons are no longer working?

2 Likes

Hmm, it’s curious that the last five entries are not working. Can you try flipping an entry in the last 5 with another one above and see what happens? It looks like the setting value is getting truncated at some point…

2 Likes

Just so you know, it wasn’t originally the last five that started not to show up. It was five seemingly random ones, and then I went and deleted them and then re-entered them in to see if they would show up (which they didn’t), and that’s why it seems like they might not be showing up because they are the last few.

With that said, I deleted the proof-verification tag, and re-entered it so that it’s at the front of the line. Was orange, and is still orange and showing up fine. Still seems to be just those five…

First, just wanted to say thanks for this awesome component. It’s really helped categorize and easily distinguish between tags and ultimately, categories. Our community has given amazing feedback around this component, so thank you!

I seem to be having two separate issues that I’m hoping can be resolved:

  1. Icons are entered correctly, but never show up (similar to @MrDavis97 – but also different as they never showed up in the first place)
  2. Some tags show where the icon should be, but nothing shows up

Example 1:
I’ve entered in two different tags, both using the same Font-Awesome icon (exclamation-circle). However, one tag it works, and in the other tag, it does not work.

I’ve tried using a different FA icon, deleting and re-adding, but nothing seems to work.

This has happened on other tags too (open-zwave-1-4, open-zwave-1-6, zwave-js-2-mqtt, zwave-2-mqtt, etc): Inovelli Community

Example 2
This one is really weird and possibly it’s a problem with FA. One of our tags (google-home) we wanted to use the FA icon, “Google”. As you can see from the diagram below (sorry for all the arrows) – the red shows how it was implemented, then the purple shows that the tag does not show up (there looks to be a placeholder – almost like that FA icon doesn’t work). The other weird thing is that it seems to show up properly when I inspected the page. I’ve confirmed this is a free icon, so it should work. The only thing I can think of is maybe there’s a lock on trademarked logos? Not sure.

As you can also see – if I swap out the Google icon with a different one, it works. So, again, may just be a FA problem, but I wanted to call it out to see if anyone else experienced the same thing.

Anyway, at the very least, I’d love some help with the first example if possible.

Thanks again for such a cool component!

4 Likes