assets: replace meshviewer.woff2 icon font with SVG masks

Drops the icomoon-managed icon font (.woff2/.woff/.ttf) in favour of
individual SVG files extracted from the original TTF. New icons can now
be added by dropping an .svg into assets/icons/svg/ and registering it
in icon.scss, removing the round-trip through icomoon.io.

Icons render via mask-image with background-color: currentColor, so
existing font-size and color rules on .ion-* elements keep working
unchanged. vertical-align matches the original font's value of 0
(baseline), so icon position relative to surrounding text is preserved.

Three SCSS modules (_sidebar, _leaflet, _table) used raw font codepoints
inline; those are converted to a new icon.icon-mask($name) mixin.

Also drops three unused icon definitions (chevron-right, person,
arrow-left-c) and the now-redundant \$font-family-icons variable.
DEVELOPMENT.md is updated to describe the new SVG workflow.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: 2 people

DEVELOPMENT.md

@@ -81,8 +81,8 @@ but also names based on elements like `p`, `a`, `div`..
 
 ## Addition of new icons
 
-To add new icons to the `meshviewer.woff2` icon-set, one must edit the icon-set manually.
+Icons are SVG files in `assets/icons/svg/`. The CSS class `ion-<name>` is generated by `assets/icons/icon.scss` and renders the SVG via `mask-image` with `currentColor`, so icons inherit text color and scale with `font-size`.
 
-- This can be done by uploading the existing `meshviewer.tff` to https://icomoon.io/new-app
-- Then, one can add a new icon by searching in the UI or uploading an SVG.
-- Finally, export the iconset and replace the existing one
+- Add the SVG to `assets/icons/svg/<name>.svg`. Use a square `viewBox` and a single-colour shape (mask uses the alpha channel).
+- Register it in `assets/icons/icon.scss` with `@include icon.icon("<name>");`.
+- Use it in markup as `class="ion-<name>"`.

assets/fonts/meshviewer.ttf

@@ -1,7 +1,18 @@
-@mixin icon($name, $code, $prefix: "ion-") {
-  .#{$prefix}#{$name} {
-    &::before {
-      content: "#{$code}";
-    }
+@mixin icon-mask($name) {
+  background-color: currentColor;
+  content: "";
+  display: inline-block;
+  height: 1em;
+  mask-image: url("@icons/#{$name}.svg");
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  vertical-align: -2px;
+  width: 1em;
+}
+
+@mixin icon($name, $prefix: "ion-") {
+  .#{$prefix}#{$name}::before {
+    mask-image: url("@icons/#{$name}.svg");
   }
 }

assets/fonts/meshviewer.woff

@@ -1,58 +1,32 @@
-@use "sass:string";
 @use "../../scss/mixins/icon" as icon;
-@use "../../scss/modules/variables" as variables;
 
-// Needed for standalone scss
-// @import 'icon-mixin';
-
-$cache-breaker: string.unique-id();
-
-@font-face {
-  font-family: "ionicons";
-  font-style: normal;
-  font-weight: normal;
-  src:
-    url("@fonts/meshviewer.woff2?rel=#{$cache-breaker}") format("woff2"),
-    url("@fonts/meshviewer.woff?rel=#{$cache-breaker}") format("woff"),
-    url("@fonts/meshviewer.ttf?rel=#{$cache-breaker}") format("truetype");
-}
-
-[class^="ion-"],
-[class*=" ion-"] {
-  &::before {
-    display: inline-block;
-    font-family: variables.$font-family-icons;
-    font-style: normal;
-    font-variant: normal;
-    font-weight: normal;
-    line-height: 1;
-    text-rendering: auto;
-    text-transform: none;
-    vertical-align: 0;
-  }
+[class^="ion-"]::before,
+[class*=" ion-"]::before {
+  background-color: currentColor;
+  content: "";
+  display: inline-block;
+  height: 1em;
+  mask-position: center;
+  mask-repeat: no-repeat;
+  mask-size: contain;
+  vertical-align: -2px;
+  width: 1em;
 }
 
-@include icon.icon("chevron-left", "\f124");
-@include icon.icon("chevron-right", "\f125");
-@include icon.icon("pin", "\f3a3");
-@include icon.icon("wifi", "\f25c");
-@include icon.icon("eye", "\f133");
-@include icon.icon("up-b", "\f10d");
-@include icon.icon("down-b", "\f104");
-@include icon.icon("locate", "\f2e9");
-@include icon.icon("close", "\f2d7");
-@include icon.icon("location", "\f456");
-@include icon.icon("layer", "\f229");
-@include icon.icon("filter", "\f38B");
-@include icon.icon("connection-bars", "\f274");
-@include icon.icon("share-alt", "\f3ac");
-@include icon.icon("clipboard", "\f376");
-@include icon.icon("people", "\f39e");
-@include icon.icon("person", "\f3a0");
-@include icon.icon("time", "\f3b3");
-@include icon.icon("arrow-resize", "\f264");
-@include icon.icon("arrow-left-c", "\f108");
-@include icon.icon("arrow-right-c", "\f10b");
-@include icon.icon("full-enter", "\e901");
-@include icon.icon("full-exit", "\e900");
-@include icon.icon("ruler", "\f333");
+@include icon.icon("pin");
+@include icon.icon("wifi");
+@include icon.icon("eye");
+@include icon.icon("locate");
+@include icon.icon("close");
+@include icon.icon("location");
+@include icon.icon("filter");
+@include icon.icon("connection-bars");
+@include icon.icon("share-alt");
+@include icon.icon("clipboard");
+@include icon.icon("people");
+@include icon.icon("time");
+@include icon.icon("arrow-resize");
+@include icon.icon("arrow-right-c");
+@include icon.icon("full-enter");
+@include icon.icon("full-exit");
+@include icon.icon("ruler");