From 7dcb3ae6781a508120233a7d1a2ac26d98555f59 Mon Sep 17 00:00:00 2001
From: Henrik Giesel <hengiesel@gmail.com>
Date: Sun, 28 Mar 2021 15:45:51 +0200
Subject: [PATCH] Include pin-angle icon via inline SVG

---
 ts/editor/editor.scss       | 13 ++++++++-----
 ts/editor/labelContainer.ts |  5 +++--
 2 files changed, 11 insertions(+), 7 deletions(-)

diff --git a/ts/editor/editor.scss b/ts/editor/editor.scss
index 3be5e2b0f..3e16a0392 100644
--- a/ts/editor/editor.scss
+++ b/ts/editor/editor.scss
@@ -133,15 +133,18 @@ button.highlighted {
     }
 }
 
-.icon {
-    cursor: pointer;
-    color: var(--text-fg);
+.icon > svg {
+    fill: var(--text-fg);
+}
 
-    &.is-inactive::before {
+.pin-icon {
+    cursor: pointer;
+
+    &.is-inactive {
         opacity: 0.1;
     }
 
-    &.icon--hover::before {
+    &.icon--hover {
         opacity: 0.5;
     }
 }
diff --git a/ts/editor/labelContainer.ts b/ts/editor/labelContainer.ts
index e34a59a95..41b205048 100644
--- a/ts/editor/labelContainer.ts
+++ b/ts/editor/labelContainer.ts
@@ -1,5 +1,5 @@
 import { bridgeCommand } from "./lib";
-// import pinIcon from "./pin-angle.svg";
+import pinIcon from "./pin-angle.svg";
 
 function removeHoverIcon(evt: Event): void {
     const icon = evt.currentTarget as HTMLElement;
@@ -24,7 +24,8 @@ export class LabelContainer extends HTMLDivElement {
         this.appendChild(this.label);
 
         this.sticky = document.createElement("span");
-        this.sticky.className = "bi me-1 bi-pin-angle icon";
+        this.sticky.className = "icon pin-icon me-1";
+        this.sticky.innerHTML = pinIcon;
         this.sticky.hidden = true;
         this.appendChild(this.sticky);