What's the simplest way to swap out the sl-icon (chevron-right) being used in the <sl-details>

[snicol-icanbwell]

I simply need to use a fatter chevron icon, but honestly going through the trouble of registering a completely new library set of icons seems way over kill for just this one component. Any creative ways to swap this out? Can I target the "summary-icon" as part of the css and change it somehow 🤔

[claviska]

This was discussed a bit in #985. While improvements have been made here, icon customizations still rely on the icon library to make such changes. The idea is that, if you're going to customize one icon, you probably want to customize all icons to make things consistent throughout the library.

Some components let you slot in icons to override them. If details worked this way, it might look like this:

<sl-details summary="Toggle">
  <sl-icon slot="summary-icon" name="chevron-thick" library="yours"></sl-icon>
  Content here.
</sl-details>

Alternatively, you'd be able to slot in an SVG:

<sl-details summary="Toggle">
  <svg slot="summary-icon">…</svg>
  Content here.
</sl-details>

I'm thinking all components should allow this, so I'll probably make the change to allow this. The drawback is that every component needs to have a custom icon slotted in, whereas customizing the system icon library would apply to all components without slotting anything in.

Another alternative might be a function that lets you override certain icons. Something like this, perhaps:

import { setIcon } from '@shoelace-style/shoelace/dist/utilities/icon-library.js';

setIcon('system', 'chevron-right', `<svg>…</svg>`);

This makes it simpler, but it goes against the spirit of "if you're going to customize the icon library, you should customize all icons for consistency."

So maybe slotting is better for your use case?

Workaround

Here's a quick workaround using a hard coded SVG as a background image. It works in light/dark because it covers the existing icon.

sl-details::part(summary-icon) {
  background-repeat: no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg fill='currentColor' xmlns='http://www.w3.org/2000/svg' viewBox='0 0 384 512'%3E%3Cpath d='M342.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L274.7 256 105.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/%3E%3C/svg%3E");
}

Try it on CodePen

If the background image icon didn't cover the normal icon, you'd need to set color: transparent and change the fill color, but then it wouldn't flip in light/dark anymore.

Hopefully that gets you by for now.

[claviska]

I added the summary-icon slot in efea514. This will be available in the next release.

Cheers!

[snicol-icanbwell]

@claviska As an FYI, it does look the workaround to use a background-image url would only work if I was going for a "black" chevron-left icon. Because setting the color doesn't impact the "fill='currentColor'" for some reason. I did some googling and determined that I would have to hardcode my color inside this url string in order for it to take on the color I needed. But i need my color to be set as a var(--color) 😢, so I guess I'll just wait until the next release comes around. Appreciate your help again.

[claviska]

Ah, right. In that case, you can probably use another selector to detect the dark theme and provide a second SVG. Not great, but it might get you by.

sl-details::part(summary-icon) {
  background-image: url("…fill='black'…"); 
}

.sl-theme-dark sl-details::part(summary-icon) {
  background-image: url("…fill='white'…"); 
}

[snicol-icanbwell]

Ah, right. In that case, you can probably use another selector to detect the dark theme and provide a second SVG. Not great, but it might get you by.

sl-details::part(summary-icon) {
  background-image: url("…fill='black'…"); 
}

.sl-theme-dark sl-details::part(summary-icon) {
  background-image: url("…fill='white'…"); 
}

Unfortunately, I'm working with web components that are fully customizable by the client. So we allow them to define their --color-primary-base and i pass this along.

[claviska]

Update: I removed summary-icon and instead added expand-icon and collapse-icon so it's consistent with how custom icons work in <sl-tree-item>. This lets you set both states, rather than one state (the default uses one that just happens to rotate, but this wouldn't work for a + or - icon, for example).

By default, there is a rotation animation but you can override that easily now. Here's an example with icons that change with the expanded state, but aren't animated:

<sl-details summary="Toggle Me" class="custom-icons">
  <sl-icon name="plus-square" slot="expand-icon"></sl-icon>
  <sl-icon name="dash-square" slot="collapse-icon"></sl-icon>

  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
  aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</sl-details>

<style>
  sl-details.custom-icons::part(summary-icon) {
    /* Disable the expand/collapse animation */
    rotate: none;
  }
</style>

Result: