defer dom parser instantiation

docs/resources/changelog.md

@@ -17,6 +17,7 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 - Improved the default icon for `<sl-image-comparer>` so it's more intuitive and removed `grip-vertical` from system icon library
 - Improved RTL styles for many components [#768](https://github.com/shoelace-style/shoelace/pull/768)
 - Improved base path logic to execute only when `getBasePath()` is first called to better support SSR [#778](https://github.com/shoelace-style/shoelace/issues/778)
+- Improved `DOMParser` instantiation in `<sl-icon>` to better support SSR [#778](https://github.com/shoelace-style/shoelace/issues/778)
 - Revert menu item caching due to regression [#766](https://github.com/shoelace-style/shoelace/issues/766)
 
 ## 2.0.0-beta.74

src/components/icon/icon.ts

@@ -8,7 +8,7 @@ import styles from './icon.styles';
 import { getIconLibrary, unwatchIcon, watchIcon } from './library';
 import { requestIcon } from './request';
 
-const parser = new DOMParser();
+let parser: DOMParser;
 
 /**
  * @since 2.0
@@ -74,6 +74,13 @@ export default class SlIcon extends LitElement {
   async setIcon() {
     const library = getIconLibrary(this.library);
     const url = this.getUrl();
+
+    // Create an instance of the DOM parser. We do it here instead of top-level to support SSR while maintaining a
+    // single parser instance for optimal performance.
+    if (!parser) {
+      parser = new DOMParser();
+    }
+
     if (url) {
       try {
         const file = await requestIcon(url);