My htmldialog icon is making a sad face icon instead of my icon. What's up?

My htmldialog/UI::Command Icon is making a sad face icon instead of my icon. What’s up?

My large and small icons are 2Kbytes in digital size. They have html compatible names; no spaces, no special characters and starting with an alphabetic character not a number. The large icon is 32x32 pixels in size and the small icon is 24x24pixels in size. I used Gimp to create them. They are jpg format.

Any ideas what might be the matter?

At first, UI::HtmlDialog class is different than UI::Command class.

The #small_icon= method is used to identify the icon file for the command’s small icon.
Small icons should be 24x24 pixel images for best display quality.

The #large_icon= method is used to identify the icon file for the command’s large icon. large icons should be 32x32 pixel images for best display quality.

Both should be png.

Since SketchUp 2016 it is possible to provide vector images for the command (and cursors). SVG format for Windows and PDF format for OS X. Since the vector images scale for both small and large icon sizes, you may choose to use only one vector image for both variants.

an example:

1 Like

Thank you for getting back to me.

I was using the command icon to start a dialog which is why I mentioned it. I just put in for information. I think the problem might be the fact that I’ve saved the icons as jpg’s. You have stated that they should be png’s. I’ll change that and see. Otherwise I could try and make them svg format but as you have written, that would mean checking the SketchUp version of the user and also I would have to create a svg version of my bitmap icon.

Again, thank you for your help.

1 Like

Honestly (I’m lazy enough) for myself I create one icon for both small an large as a .png only. I did not see (in my system) any significant differences even these are 32x32 or 512x512 or whatever.
So .png should work in every case, just probably will not looks nice in a certain user system.

Sure, if you want to be nice looking at all resolution/scaling displays you have to create .png .svg and .pdf and apply them according to version and platform.

I take your point. Thank you again.

1 Like

No this is not the issue. When a “sad face” icon shows it means that the icon file cannot be found.

So you may need to supply a full absolute path to your icons.

cmd.large_icon= File.join(__dir__, 'icons/my_large_icon.png')

There is an acceptable relative path rule for the icon files, but it is not documented so I always forget what it is. So, probably best to always supply an absolute path.

Re. png vs jpeg. The png format is also compressed, but better in that it supports transparency and therefore anti-aliasing. Jpegs can also get blurry more quickly when scaled.

1 Like

Thank you for this correction in my thinking. I thought jpg might be the issue because png is used in the documentation for UI::Command. Both work. And you are, of course, correct about png’s supporting transparency and being less blurry.

I used cmd.large_icon= File.join(dir, ‘my_large_icon.png’) and the icon was found.

My issue seems now to be fixed.