The icon library mutator is only applied to the first of multiple identical icons

[niboan]

Describe the bug

When using SVG sprite sheets while having multiple instances of the same icon in the page, the mutator function is only applied to the first instance.

Might be related to #1925.

To Reproduce

Use SVG sprite sheets with a mutator, and place multiple instances of the same icon

registerIconLibrary('default', {
    ...
    mutator: svg => svg.setAttribute('fill', 'currentColor'),
    spriteSheet: true
});

<div>
    <sl-icon name="fas-folder-open"></sl-icon>
    <sl-icon name="fas-folder-open"></sl-icon>
    <sl-icon name="fas-folder"></sl-icon>
    <sl-icon name="fas-folder"></sl-icon>
</div>

The first of each icon type has the mutator applied, the second has not, see screen shot.

Demo

The CodePen for https://shoelace.style/components/icon#customize-the-default-library-to-use-svg-sprites doesn't work, probably because of CSP, so I can only reproduce it locally.

Screenshots

Browser / OS

• OS: Windows
• Browser: Chrome, Firefox
• Browser version: latest

[KonnorRogers]

Thanks for the report!

Fix here: #2178

[niboan]

Nice, thanks!

Too bad it didn't make it to the 2.17.0 release, though, we were hoping to have the fix in our next release.
Will there be a 2.17.1?

[KonnorRogers]

@niboan looks like we have a few other bug fixes pending, so i'll check with @claviska , but I think we could reasonably get out a 2.17.1 pretty shortly.

[KonnorRogers]

@niboan we released 2.17.1 today which should have this fix.

[niboan]

Wow, that was fast, thanks a lot!