Creating custom icon for panels does nothing or shows up blank.

[A-Sparowe]

Steps to reproduce

After creating a new panel I tried to give it a custom icon since there are no "gaming/controller" icons available. I added some various icons to my imgbb account so that they would be available online and then I could just provide the URL. At first, I tried using just PNG images with a transparent background, then when that didn't work I tried using a few SVG images so they would scale properly because I had no idea if my PNG weren't working because they were too big. Adding them with "direct link" would bring up a white square that looked like static. Other ways of adding them, as the Base64 resulted in either a little white square or an empty picture. I checked the Base64 code by reversing it and making sure the image came back ok and it did. The few times I did get the intended image I was going to show up after hitting the "load" button would show up in the edit screen but would disappear after I was finished.

This isn't a "make it or break it" bug for me that would cause me to stop using this wonderful extension. Honestly, the reason I started using it in the first place was because of this very feature lol. I've been wanting to add my own custom icons to my containers for some time now and I couldn't figure out any other way to do it. So while I can't technically do it right now, or I am doing it wrong, or it's just a bug, I am going to continue to use this extension because of everything else it gets right.

Really good job! I hope to see this little bug fixed or get some help fixing it on my end.

Edit: I tried to add the "BUG" label to my topic but it didn't work.

[mbnuqw]

Thanks for the report, I cannot reproduce this, could you provide the values (if possible) you used?

Also, I'll write some notes regarding this feature, perhaps some of them will be helpful.

Url:

• Loaded image will be scaled to 32x32 and cached.
• Sidebery will use that local cached image and will not make any requests after saving this property.
• You can use any format supported by Firefox

Base64:

• This value should start with data:image/png;base64, (with appropriate mime type)
• Make sure there is no extra spaces at the start/end of the value
• This value will be used as is, without scaling, so big images can slow down the addon.

Text:

...And I think I should add some validation and show some error messages about incorrect values.

[A-Sparowe]

Yes I will try and reproduce my results as best as I can. Sorry I didn't get back to you sooner. I will have time the next few days to do this now.

[A-Sparowe]

Oh I almost forgot! Should I re-size the image I want to 32 x 32 before I try to add it or does it not matter? At first I was using SVG images saved for web use and when they were failing to "actually save" as the icon I then went with PNG with transparent background.

[mbnuqw]

You can use any size you have. Just check if there are any spaces before and after the value (I'll fix this). Another note for svg - If you want to put svg code, you will need:

• to use data:image/svg+xml;utf8, as prefix
• encode svg code for URL (I'll fix this too)

[kanmeiban]

Since this has been open for year and a half, maybe it should be in the user manual with a link to it pointing from the settings.

[ekutner]

I still can't get this to work. Here are the things I tried: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAAARElEQVRIS+3SwQkAMAzDwGT/pTuCEJS8lK8xhiM7x7fHe9Pgd/FII9UCPY0mo0KkJKTzSDUZFSIlIZ1HqsmoECkJ6fwBv5IAHZpfiPwAAAAASUVORK5CYII= The icon shows up empty

https://icons.iconarchive.com/icons/iconsmind/outline/512/Camera-icon.png When pasting the URL a "Load" button appears, clicking it displays the icon in the panel settings dialog but when the dialog is closed the new icon is not applied and the previous icon is still used.

I couldn't find anything anything that loaded Font Awesome in the code but tried this as well, based on the above example: ::blue::400 32px "Font Awesome 6 Free" It shows the Unicode character, not the Font Awesome icon I was hoping to get.

[shanteadam]

I'm having the same issue as @ekutner

[mbnuqw]

@ekutner, @shanteadam provided base64 icon is completely transparent by itself, if you open a new tab and paste it in url-bar you will see the same result. Example of working base64 icon: data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABn0lEQVR4AWySA6wdURRFp2ZcRTVi1w1q27YdJ7Vt27YV1HYbfNs2HtY/N+cmj5Os8d6Hjv9BX6eOMEC4JiQJLkuycF0YaP7xKQLFzYSDQq4A4cm1/zQLJ74fVjSgllBT7qvpvb6/ryYqrm1dCcEI98+HQ0vgwlp4eR7GNoE+DlZT27F15YSIzU9jGsOR5SraPgVenPMZqGagYxsGht6WXtZgSSfYOd08C9WgXw397gt0zbHdhv41YGYHoT1sHg+vLkL0L4j8AY+Pw9phMKUFTG0N/apjDZKMgcu4sqwLpMVCdgoU5kJpIfaAsmIozIH0OEiOhKVdsJm4Ag3yMgDg8kbYMEqFpUVyPxpu7ASAgmxY2SPAIEnQtEyXAb48gUfHwFUJleVwew98uA8Ab276jzPJ10TjuH0qVFZARRnE/ddohTl6X14Kbhfsm+ffyGu+MZquD6kPl9ZDThr8/2CiKf/fa3nXt8PQhiFj9C2S+dC/po7v3Gp4ehqeCWaJlnfT1FXsW6Swq9zbUjUcfJBaXPlhIqmZidjs/Bgq5oGenQGmGkYQ+gIA9QAAAABJRU5ErkJggg==.

Example with URL is working, I cannot reproduce the issue with saving config (at least in v4.10.2)

For using the font icons, you need to install this font in your system.

[shanteadam]

@mbnuqw Thank you for taking a look at this again. When I use your base64 example it works fine. Here are some example urls that don't seem to work when used directly:

https://cdn-icons-png.flaticon.com/512/6586/6586715.png https://www.iconpacks.net/icons/1/free-pin-icon-48-thumb.png

Both of these work after I encode them to base64 using this tool: https://base64.guru/converter/encode/image/png

[mbnuqw]

@shanteadam, thank you, I can reproduce it now (but only in v5)

[mbnuqw]

Current workarounds and general notes:

• If you are using text value, make sure that the font is installed in your system.
• If you are using URL to the icon, accept the "Accessing websites data" permission.
• base64 values works as intended

[mbnuqw]

Fixed from v5.0.0