Custom icon styling tweaks

[cpsievert]

Follow up to #1853.

Currently, if you run the example there with the shiny logo <img>, you'll get

So, 1cf74c1 sets max-height like we do for svg, etc. which leads to:

Which made me realize that if the image has lots of whitespace, or already something like a border, it's going to look too small/busy.

For this reason, 65d59d2 allow you to put a .border-0 class on the icon container to get rid of the border/border-radius:

[gadenbuie]

I'd rather update the example than change the CSS. A lot of what you described was intentional.

I think the shiny image is a bit of a misdirection; the primary use case for raster images is likely to be avatar style images. The escape hatch if you have an icon in an image is to add an .icon class to the img element.

The icon test in the chat playwright tests is a better example; I forgot to return to the example app (where we should use the same image as in the test app or add the .icon class).

[cpsievert]

From a little bit of playing around with other (avatar) images, it doesn't seem all that uncommon for the image content to be clipped by the border-radius on the container. Adding .icon does indeed help, but I still think there are two remaining problems that something like .border-0 could help with:

1. It doesn't seem that uncommon for avatar images to come with their own border.
2. 20x20px rendering still feels a bit small for me for non-trivial shapes.

[gadenbuie]

2. 20x20px rendering still feels a bit small for me for non-trivial shapes.

Yeah, these images shouldn't be 20x20, they should be full bleed. At least that was the intention (and what I see on main).

[cpsievert]

they should be full bleed. At least that was the intention (and what I see on main).

Ah, I see where you're coming from now

[gadenbuie]

nice!