Adds sl-copy-button fontawesome icons (#302)

- Changes `sl-copy-button` icons to use fontawesome equivalents so they
fit in with everything else in ReplayWebpage
- Converts sl-icon to use fa-icon for error icon
- Adds missing whitespace

Co-authored-by: Ilya Kreymer <ikreymer@gmail.com>

src/components/labeled-field.ts

@@ -2,8 +2,27 @@ import { LitElement, css, html, nothing } from "lit";
 import { customElement, property } from "lit/decorators.js";
 
 import { wrapCss } from "./../misc";
+import faClone from "@fortawesome/fontawesome-free/svgs/regular/clone.svg";
+import faCheck from "@fortawesome/fontawesome-free/svgs/solid/check.svg";
+import faX from "@fortawesome/fontawesome-free/svgs/solid/times.svg";
+
 import "@shoelace-style/shoelace/dist/components/copy-button/copy-button.js";
 
+import { registerIconLibrary } from "@shoelace-style/shoelace/dist/utilities/icon-library.js";
+
+import systemLibrary from "@shoelace-style/shoelace/dist/components/icon/library.system";
+
+// disable system library to prevent loading of unused data: URLs
+// allow only "x-lg" as it is needed for sl-dialog
+registerIconLibrary("system", {
+  resolver: (name) => {
+    if (name === "x-lg") {
+      return systemLibrary.resolver(name);
+    }
+    return "";
+  },
+});
+
 @customElement("wr-labeled-field")
 class LabeledField extends LitElement {
   @property({ type: String })
@@ -48,7 +67,23 @@ class LabeledField extends LitElement {
       <div class="col-content">
         <slot></slot>
         ${this.copy
-          ? html` <sl-copy-button .value=${this.copy || ""}></sl-copy-button>`
+          ? html` <sl-copy-button .value=${this.copy || ""}>
+              <fa-icon
+                slot="copy-icon"
+                .svg=${faClone}
+                aria-hidden="true"
+              ></fa-icon>
+              <fa-icon
+                slot="success-icon"
+                .svg=${faCheck}
+                aria-hidden="true"
+              ></fa-icon>
+              <fa-icon
+                slot="error-icon"
+                .svg=${faX}
+                aria-hidden="true"
+              ></fa-icon>
+            </sl-copy-button>`
           : nothing}
       </div>`;
   }