sl-button default icon size

[mpharoah]

With a root element font size of 16px, which is the default for every desktop browser AFAIK, the contents of an sl-button with default size will be 14px (--sl-button-font-size-medium is --sl-font-size-small which is 0.875rem which is 14px).

For icons, which are usually optimized for multiples of 16x16, this can make them a little blurry since some lines that are pixel-aligned at 16x16 are not at 14x14. For example, this is what a button with the list-check icon from the default icon library looks like at the default 14x14px size vs 16x16.

Using css parts, or simply just adding styles to the content you slot into the button can let you override the icon size, though this can be tedious to do when you just want this style globally and you have lots of webcomponents using the button with their own shadow DOMs that would each need to have this style added. What I ended up doing is just adding a very hacky update to the SlButton prototype to use my altered desired css for a button prefix and suffix (where my icons go):

import SlButton from '@shoelace-style/shoelace/dist/components/button/button';

(SlButton.prototype.constructor as unknown as { styles: { cssText: string } }).styles.cssText += `
	slot[part="prefix"], slot[part="suffix"] {
		font-size: var(--sl-font-size-medium);
	}

	:host([size="small"]) slot[part="prefix"], :host([size="small"]) slot[part="suffix"] {
		font-size: var(--sl-font-size-small);
	}

	:host([size="large"]) slot[part="prefix"], :host([size="large"]) slot[part="suffix"] {
		font-size: var(--sl-font-size-large);
	}
`;

It would be nice to be able to better control how icons inside buttons are sized. In my case, I just changed the font-size for the button prefix and suffix, though a better option would probably be to just target any sl-icon in a button since that would also handle icon-only buttons that put the icon in the main content slot instead of the prefix or suffix.

Perhaps there could be css variables like --sl-buton-icon-size-[small/medium/large]? Then a style could be added to sl-button to set the font size of slotted buttons. Then users could simply override those css variables once in the global stylesheet instead of needing to add it to every webcomponent they create that uses sl-button.

It might also be worth setting it to a default that makes icons in medium sized buttons be 16x16? Increasing it from 14x14 to 16x16 doesn't actually make the sl-button any larger, and it makes some icons much more crisp.

[claviska]

That's a valid point. I'd like to hold off on making any internal changes to design tokens just yet. We still have some discussions around design tokens, themes, icons, etc.

Fortunately, as you've discovered, there's a quick fix using light DOM styles. Here's the fix for future readers:

sl-button > sl-icon {
  font-size: 1rem;
}

Try it on CodePen

though this can be tedious to do when you just want this style globally and you have lots of webcomponents using the button with their own shadow DOMs that would each need to have this style added

Since font-size is the only property, you should be able to add font-size: inherit in your custom elements to have it pass through. It's a bit more work than using a design token, but it should get you by.

I do think having a design token for this is a reasonable suggestion, so I'll definitely keep it in mind as things continue to evolve.