FlorianWoelki / obsidian-iconize

Simply add icons to anything you want in Obsidian.
https://florianwoelki.github.io/obsidian-iconize/
MIT License
813 stars 55 forks source link

Some icons showing blank in context menu #309

Open Aetherinox opened 9 months ago

Aetherinox commented 9 months ago

Describe the bug Certain icons in the suggestion context menu appear blank. However, if you select one of the blank spots, the actual name of the icon appears in the note, but also doesn't show in either mode for Obsidian (Editing and Reading Mode). It just shows as the text to call the icon.

To Reproduce Steps to reproduce the behavior:

  1. Install Font Awesome 6 icons
  2. Start typing out the name of an icon

Expected behavior Shows icons

Screenshots This example is of me typing out the starting name of icons with :check to see what all matches I can find. Eventually no actual icons show and it's all blank boxes.

NzTLsFp


Here is a list of the icon packages I have installed: LpUtGJ0

Note

I do own and have Font-Awesome 6 Pro icons installed, but they should behave the same as the free ones or Font-Awesome 5. As shown in the 2nd screenshot of my icon list, I keep the conformity that Font-Awesome normally uses which is far: Font Awesome Regular fab: Font Awesome Brands fas: Font Awesome Solid fad: Font Awesome Dualtone


Here is a small sample list of the icons that don't work

:FaBuildingCircleCheck:
:FaAnchorCircleCheck:
:FaBadgeCheck:
:FaBinaryCircleCheck:
:FaBoxCircleCheck:
:FaBuildingCircleCheck:
:FaCartCircleCheck:
:FaCheckDouble:
:FaCircleCheck:
:FaDog:
:FaDogLeashed:
:FaHotdog:
:FaDogLeashed:
:FaDogLeashed:

Seem to all start with Fa.

I then took my entire vault and placed it into Visual Studio Code and went looking for any mention of these icons.

FaDogLeashed

as an example, does have three images associated to it. But they are not Fa IRMqLvL

However, these three icons are in the following locations:

.obsidian\icons\fas\DogLeashed.svg
.obsidian\icons\fad\DogLeashed.svg
.obsidian\icons\far\DogLeashed.svg

I then went back to Obsidian and typed the name of that icon, and I do end up seeing three blank spots:

uuHdMjj

Yet some icons in that same structure work perfectly fine.

74I7B5F

I went into the data.json file that is storing the folder icons, and I do see that it's using Fa and not Fas.

  "Software/Gitea/0. URL & Paths.md": "FaCircleSmall",
  "Software/Gitea/1. Setup User.md": "FaCircleSmall",
  "Software/Gitea/2. Create MySQL Database.md": "FaCircleSmall",
  "Software/Gitea/3. Install (Docker).md": "FaCircleSmall",
  "Software/Gitea/3. Install (Manual).md": "FaCircleSmall",
  "Software/Gitea/4. Configure Services.md": "FaCircleSmall",
  "Software/Gitea/5. Configure Nginx.md": "FaCircleSmall",

Those icons for the folder work fine. But if it's using Fa instead of Fas, that means that certain icons are not being loaded or are being overwritten?

FlorianWoelki commented 9 months ago

Thank you for reporting this issue. I am currently using Font-Awesome-Solid from the premade custom icon packs (you can find these under Browse icon packs) and it works perfectly without any issues.

Do you have some kind of reproduction vault, so that I can reproduce this issue more easily?

Aetherinox commented 9 months ago

I'm running some tests at the moment for the "blank" icons. But I've also started a new vault, and all I've installed are two fontawesome 6 icon packs, fas, and fad

ZtDX3Fd

It shows the few icons I added, but for fas and fad, it shows the same icons.

nqojthB

I added all 4 of the icons in the list, and they appear to have the same names

:FaDog:
:FaDogLeashed:
:FaDog:
:FaDogLeashed:

It's not doing something like FasDog or FadDog. It's sticking to FaDog, and two icons from two collections collide.

Almost like it's taking only the first two characters of the name and using that. I'm going to make two new icon sets with different names and try.


Yeah, it's an issue with the first two characters being used. On my install, I can't have anything using the same first two characters, otherwise it works showing the correct icons

AftYV4a

I'm going to go back to my original vault, back it up, and reinstall the icons with different abbreviations.

Aetherinox commented 9 months ago

So that's the problem. No two icon packs can contain the same first two letters, otherwise they'll start overriding each other.

OnE8rcH

Once I uninstalled all the icons and re-added them using different abbreviations that didn't collide with others, it shows multiple icons fine.

FgscVBh

Going to make for a pain with trying to remember which is which, because a few of the FA Pro icons have similar style names. I've looked through though, and apparently all the icons show and work fine now after I re-named their abbreviations. Not sure if you did that on purpose, or if you may change it up in the future to allow for maybe a way to name the icon pack, but also pick an abbreviation. That may help out a bit.

But up to you. As long as it works. And I've also got the ability to see icons now in Edit mode after your other update, so I'm happy.

FlorianWoelki commented 9 months ago

Ok so it's basically an issue when the first two characters are the same and the icon name itself is also the same?

Aetherinox commented 9 months ago

Yeah, it seems to be if you have icons of the same name, that also are in packs starting with the same two letters, it causes them to break, or one icon pack will take priority.

For FontAwesome, none of the icons are prefixed with anything. Just the name of the icon itself:

vVSBvie

And for the main FontAwesome icon packs (Solid, Duotone, Sharp Thin) all have the same icon names.

So I've got the icon 00.png from FAS conflicting with FAR. And it seems to use whichever ones got loaded first by the plugin.