com-pas
diff --git a/‎foundation/icons/icon-font.ts‎
Lines changed: 34 additions & 0 deletions b/‎foundation/icons/icon-font.ts‎
Lines changed: 34 additions & 0 deletions
diff --git a/‎foundation/icons/material-symbols-outlined.woff2‎
313 KB b/‎foundation/icons/material-symbols-outlined.woff2‎
313 KB
diff --git a/‎oscd-publisher.ts‎
Lines changed: 11 additions & 0 deletions b/‎oscd-publisher.ts‎
Lines changed: 11 additions & 0 deletions
diff --git a/‎package.json‎
Lines changed: 1 addition & 0 deletions b/‎package.json‎
Lines changed: 1 addition & 0 deletions
@@ -0,0 +1,34 @@
+// Self-hosts the Material Symbols Outlined font used by `md-icon`.
+
+const fontUrl = new URL('./material-symbols-outlined.woff2', import.meta.url)
+  .href;
+
+const styleElementId = 'oscd-publisher-icon-font';
+
+export const publisherIconFontFamily = 'OSCD Publisher Icons';
+
+export function loadPublisherIconFont(): void {
+  if (document.getElementById(styleElementId)) return;
+
+  const style = document.createElement('style');
+  style.id = styleElementId;
+  style.textContent = `
+    @font-face {
+      font-family: '${publisherIconFontFamily}';
+      font-style: normal;
+      font-weight: 400;
+      font-display: block;
+      src: url('${fontUrl}') format('woff2');
+    }
+  `;
+  document.head.appendChild(style);
+}
+
+// Scopes `--md-icon-font` to a single element instead of `:root`, so it
+// can't clash with other plugins or the host.
+export function applyPublisherIconFont(host: HTMLElement): void {
+  host.style.setProperty(
+    '--md-icon-font',
+    `'${publisherIconFontFamily}', 'Material Symbols Outlined'`
+  );
+}
@@ -10,6 +10,12 @@ import { DataSetEditor } from './editors/dataset/data-set-editor.js';
 import { GseControlEditor } from './editors/gsecontrol/gse-control-editor.js';
 import { ReportControlEditor } from './editors/report/report-control-editor.js';
 import { SampledValueControlEditor } from './editors/sampledvalue/sampled-value-control-editor.js';
+import {
+  applyPublisherIconFont,
+  loadPublisherIconFont,
+} from './foundation/icons/icon-font.js';
+
+loadPublisherIconFont();
 
 const EditorSelector = {
   Report: 'report-control-editor',
@@ -43,6 +49,11 @@ export default class PublisherPlugin extends ScopedElementsMixin(LitElement) {
   @state()
   private publisherType: PublisherType = 'GOOSE';
 
+  connectedCallback(): void {
+    super.connectedCallback();
+    applyPublisherIconFont(this);
+  }
+
   private filterValues: Record<PublisherType, string> = {
     Report: '',
     GOOSE: '',
 
@@ -13,6 +13,7 @@
     "analyze": "cem analyze --litelement",
     "start": "tsc && concurrently -k -r \"tsc --watch --preserveWatchOutput\" \"wds\"",
     "build": "rimraf dist && rollup -c rollup.config.js",
+    "preview": "npm run build && npx serve dist -l 5000 --cors",
     "deploy": "npm run build && gh-pages --dist 'dist' --branch 'deploy'",
     "prepublish": "tsc && npm run analyze -- --exclude dist",
     "lint": "eslint --ext .ts,.html . --ignore-path .gitignore && prettier \"**/*.ts\" --check --ignore-path .gitignore",