Matching wrong tag to tag icon

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!

5 Likes

I have this exact same issue again. But now with the tag “discourse” and “jitsi”. I cannot add any icon to them. In fact any newly created tag cannot be assigned an icon. Existing tags can be modified without issues. Is there some way I can generate a log about this?

1 Like

I’m not sure, but maybe there’s an issue after a certain number of tags in the setting. Can you tell me how many tags you are adding icons to, roughly?

I have 33 tags now, all of them are listed here.

1 Like

Hi @AquaL1te and @e3hines,
I made an update to the component that fixes the bug you both ran into.

The issue was that the component code was previously matching the wrong tag for a specific icon. In AquaL1te’s site this is quite obvious:

When the component was looking for an icon for jitsi it was wrongly matching it to get the icon (and then in a second step only, it was checking the full tag name, and since there was no match, it was showing nothing).

If you update the component, you should see the issue fixed.

Because Font Awesome has multiple sets of icons, the brand icons need a prefix. Try using fab-google, that should work. (And sorry it took me so long to respond to this…)

6 Likes

That indeed fixes it! Thanks!

1 Like

Awesome, that fixed it for me too – thank you so much!

1 Like