demo · v137

Icon Swap

The pain v137 fixes: every icon SVG you didn't write yourself needs you to crack it open and add an id="root" before <use href="icon.svg#root"> will resolve. Drop the fragment and Chrome 137 references the root element directly — paste in any third-party SVG, instantly usable.

probing…
—

the code

<!-- Before v137: only works if icon.svg has <svg id="root"> -->
<svg width="48" height="48"><use href="check.svg#root" /></svg>

<!-- v137+: works with any SVG, no edits required -->
<svg width="48" height="48"><use href="check.svg" /></svg>

<!-- Icon library swap: build the href dynamically. -->
icons.forEach(name => {
  el.innerHTML = `<svg viewBox="0 0 24 24">
    <use href="${"/icons/" + theme + "/" + name + ".svg"}" />
  </svg>`;
});

see also