From e117fa549a950c5c1f12b037b612f01ef462e853 Mon Sep 17 00:00:00 2001
From: Florian <fmaurer@disroot.org>
Date: Sun, 3 May 2026 22:37:48 +0000
Subject: [PATCH] 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>
---
 DEVELOPMENT.md                       |   8 +--
 assets/fonts/meshviewer.ttf          | Bin 4796 -> 0 bytes
 assets/fonts/meshviewer.woff         | Bin 5012 -> 0 bytes
 assets/fonts/meshviewer.woff2        | Bin 3152 -> 0 bytes
 assets/icons/_icon-mixin.scss        |  21 +++++--
 assets/icons/icon.scss               |  82 +++++++++------------------
 assets/icons/svg/arrow-resize.svg    |   1 +
 assets/icons/svg/arrow-right-c.svg   |   1 +
 assets/icons/svg/chevron-left.svg    |   1 +
 assets/icons/svg/clipboard.svg       |   1 +
 assets/icons/svg/close.svg           |   1 +
 assets/icons/svg/connection-bars.svg |   1 +
 assets/icons/svg/down-b.svg          |   1 +
 assets/icons/svg/eye.svg             |   1 +
 assets/icons/svg/filter.svg          |   1 +
 assets/icons/svg/full-enter.svg      |   1 +
 assets/icons/svg/full-exit.svg       |   1 +
 assets/icons/svg/layer.svg           |   1 +
 assets/icons/svg/locate.svg          |   1 +
 assets/icons/svg/location.svg        |   1 +
 assets/icons/svg/people.svg          |   1 +
 assets/icons/svg/pin.svg             |   1 +
 assets/icons/svg/ruler.svg           |   1 +
 assets/icons/svg/share-alt.svg       |   1 +
 assets/icons/svg/time.svg            |   1 +
 assets/icons/svg/up-b.svg            |   1 +
 assets/icons/svg/wifi.svg            |   1 +
 scss/custom/_custom.scss             |  11 ++++
 scss/modules/_button.scss            |   1 -
 scss/modules/_leaflet.scss           |   6 +-
 scss/modules/_sidebar.scss           |   3 +-
 scss/modules/_table.scss             |   6 +-
 scss/modules/_variables.scss         |   1 -
 vite.config.js                       |   1 +
 34 files changed, 88 insertions(+), 73 deletions(-)
 delete mode 100644 assets/fonts/meshviewer.ttf
 delete mode 100644 assets/fonts/meshviewer.woff
 delete mode 100644 assets/fonts/meshviewer.woff2
 create mode 100644 assets/icons/svg/arrow-resize.svg
 create mode 100644 assets/icons/svg/arrow-right-c.svg
 create mode 100644 assets/icons/svg/chevron-left.svg
 create mode 100644 assets/icons/svg/clipboard.svg
 create mode 100644 assets/icons/svg/close.svg
 create mode 100644 assets/icons/svg/connection-bars.svg
 create mode 100644 assets/icons/svg/down-b.svg
 create mode 100644 assets/icons/svg/eye.svg
 create mode 100644 assets/icons/svg/filter.svg
 create mode 100644 assets/icons/svg/full-enter.svg
 create mode 100644 assets/icons/svg/full-exit.svg
 create mode 100644 assets/icons/svg/layer.svg
 create mode 100644 assets/icons/svg/locate.svg
 create mode 100644 assets/icons/svg/location.svg
 create mode 100644 assets/icons/svg/people.svg
 create mode 100644 assets/icons/svg/pin.svg
 create mode 100644 assets/icons/svg/ruler.svg
 create mode 100644 assets/icons/svg/share-alt.svg
 create mode 100644 assets/icons/svg/time.svg
 create mode 100644 assets/icons/svg/up-b.svg
 create mode 100644 assets/icons/svg/wifi.svg

diff --git a/DEVELOPMENT.md b/DEVELOPMENT.md
index e24244a1..077ec043 100644
--- a/DEVELOPMENT.md
+++ b/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>"`.
diff --git a/assets/fonts/meshviewer.ttf b/assets/fonts/meshviewer.ttf
deleted file mode 100644
index 7b6ad06f78b4bed43237ed6715bf7f241c3850f5..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 4796
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

diff --git a/assets/fonts/meshviewer.woff b/assets/fonts/meshviewer.woff
deleted file mode 100644
index 0ffed290a73edef9d283feb184147b03a193c49f..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 5012
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
OM)-dj+~E7b#{UKkSDg0%

diff --git a/assets/fonts/meshviewer.woff2 b/assets/fonts/meshviewer.woff2
deleted file mode 100644
index 75d9dd9f8452af57590e8b90d3ab761aea283d4d..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 3152
zcmV-W46pNdPew9NR8&s@01Qw73IG5A0253A01N^E0RR9100000000000000000000
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

diff --git a/assets/icons/_icon-mixin.scss b/assets/icons/_icon-mixin.scss
index 1b3b36e0..0eaaca2f 100644
--- a/assets/icons/_icon-mixin.scss
+++ b/assets/icons/_icon-mixin.scss
@@ -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");
   }
 }
diff --git a/assets/icons/icon.scss b/assets/icons/icon.scss
index 643a7cee..e4eb5595 100644
--- a/assets/icons/icon.scss
+++ b/assets/icons/icon.scss
@@ -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");
diff --git a/assets/icons/svg/arrow-resize.svg b/assets/icons/svg/arrow-resize.svg
new file mode 100644
index 00000000..5d71ff34
--- /dev/null
+++ b/assets/icons/svg/arrow-resize.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M832 811V555L732 655L348 271L448 171H192V427L292 327L676 711L576 811Z"/></g></svg>
diff --git a/assets/icons/svg/arrow-right-c.svg b/assets/icons/svg/arrow-right-c.svg
new file mode 100644
index 00000000..ea853b08
--- /dev/null
+++ b/assets/icons/svg/arrow-right-c.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M602 765Q628 765 646 747L846 537Q855 528 860 516Q864 504 864 491Q864 477 860 467Q855 456 846 447L646 235Q628 217 603 217Q577 217 560 235Q542 254 542 281Q542 307 560 327L656 427H222Q197 427 179 446Q160 464 160.0 491.0Q160 518 178 537Q196 555 222 555H656L558 655Q542 674 542 701Q542 727 558 747Q576 765 602 765Z"/></g></svg>
diff --git a/assets/icons/svg/chevron-left.svg b/assets/icons/svg/chevron-left.svg
new file mode 100644
index 00000000..2cbcca02
--- /dev/null
+++ b/assets/icons/svg/chevron-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M762 143Q768 135 768.0 126.0Q768 117 762 111L702 49Q696 43 687 43Q677 43 670 49L262 475Q259 478 258 482Q256 486 256 491Q256 495 258 500Q259 504 262 507L670 933Q677 939 686 939H687Q696 938 702 931L762 871Q768 863 768.0 854.0Q768 845 762 839L428 491Z"/></g></svg>
diff --git a/assets/icons/svg/clipboard.svg b/assets/icons/svg/clipboard.svg
new file mode 100644
index 00000000..dfdc15cb
--- /dev/null
+++ b/assets/icons/svg/clipboard.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M871 818Q896 793 896 757V129Q896 93 871.0 68.0Q846 43 810 43H214Q178 43 153.0 68.0Q128 93 128 129V757Q128 793 153.0 818.0Q178 843 214 843H388Q399 885 433.0 912.0Q467 939 512.0 939.0Q557 939 592 912Q626 885 636 843H810Q846 843 871 818ZM482 830Q470 817 470 801Q470 783 482.0 770.0Q494 757 512.0 757.0Q530 757 542.0 770.0Q554 783 554 801Q554 817 542.0 830.0Q530 843 512.0 843.0Q494 843 482 830ZM816 763H736V619H288V763H208V123H816Z"/></g></svg>
diff --git a/assets/icons/svg/close.svg b/assets/icons/svg/close.svg
new file mode 100644
index 00000000..2557e4fb
--- /dev/null
+++ b/assets/icons/svg/close.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M572 491 810 253 750 193 512 431 274 193 214 253 452 491 214 729 274 789 512 551 750 789 810 729Z"/></g></svg>
diff --git a/assets/icons/svg/connection-bars.svg b/assets/icons/svg/connection-bars.svg
new file mode 100644
index 00000000..cff96ff6
--- /dev/null
+++ b/assets/icons/svg/connection-bars.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M160 171V299H288V171ZM352 171V427H480V171ZM544 171V619H672V171ZM736 171V811H864V171Z"/></g></svg>
diff --git a/assets/icons/svg/down-b.svg b/assets/icons/svg/down-b.svg
new file mode 100644
index 00000000..ced59a62
--- /dev/null
+++ b/assets/icons/svg/down-b.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M194 642Q192 646 192 651Q192 664 202 674Q211 683 226 683H798Q813 683 823 674Q832 664 832 651Q832 646 831 642Q829 637 826 633L822 629L550 317Q544 308 534 304Q524 299 512.0 299.0Q500 299 490 304Q480 308 474 317L202 629L198 633Q195 637 194 642Z"/></g></svg>
diff --git a/assets/icons/svg/eye.svg b/assets/icons/svg/eye.svg
new file mode 100644
index 00000000..2c0c041d
--- /dev/null
+++ b/assets/icons/svg/eye.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M651 723Q716 699 772 662Q827 624 874.0 578.0Q921 532 960 489Q922 450 875 406Q828 361 773 323Q717 285 652.0 260.0Q587 235 512.0 235.0Q437 235 376 256Q316 276 264 312Q211 347 162 393Q114 440 64 491Q123 550 177 597Q231 645 285.0 678.0Q339 711 395.0 729.0Q451 747 512 747Q586 747 651 723ZM639 363Q692 416 692.0 491.0Q692 566 639 620Q585 673 512 673Q438 673 385 620Q332 566 332.0 491.0Q332 416 386 363Q439 309 512 309Q586 309 639 363ZM531 510Q549 491 576 491Q588 491 598 495Q607 499 616 505V491Q616 447 586 416Q555 385 512 385Q468 385 438.0 416.0Q408 447 408 491Q408 534 439 566Q469 597 512 597H528Q520 588 516 578Q512 567 512 555Q512 528 531 510Z"/></g></svg>
diff --git a/assets/icons/svg/filter.svg b/assets/icons/svg/filter.svg
new file mode 100644
index 00000000..4b4f8e39
--- /dev/null
+++ b/assets/icons/svg/filter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M416 299H608V203H416ZM960 779V683H64V779ZM224 541H800V441H224Z"/></g></svg>
diff --git a/assets/icons/svg/full-enter.svg b/assets/icons/svg/full-enter.svg
new file mode 100644
index 00000000..f5aae69f
--- /dev/null
+++ b/assets/icons/svg/full-enter.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1010.0) scale(1 -1)"><path d="M632 931H928V636H811V814H632ZM811 217V395H928V99H632V217ZM96 636V931H392V814H213V636ZM213 395V217H392V99H96V395Z"/></g></svg>
diff --git a/assets/icons/svg/full-exit.svg b/assets/icons/svg/full-exit.svg
new file mode 100644
index 00000000..1d70edcb
--- /dev/null
+++ b/assets/icons/svg/full-exit.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1052.5) scale(1 -1)"><path d="M742 770H915V656H628V943H742ZM628 138V424H915V310H742V138ZM282 770V943H396V656H109V770ZM109 310V424H396V138H282V310Z"/></g></svg>
diff --git a/assets/icons/svg/layer.svg b/assets/icons/svg/layer.svg
new file mode 100644
index 00000000..cd60756a
--- /dev/null
+++ b/assets/icons/svg/layer.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M129 690Q129 699 142 705L480 869Q486 872 495 874Q503 875 512.0 875.0Q521 875 530 874Q538 872 544 869L882 705Q895 699 895 690Q895 680 882 673L544 511Q538 508 530 507Q521 505 512.0 505.0Q503 505 495 507Q486 508 480 511L142 673Q129 680 129 690ZM895 490Q895 481 882 475L544 313Q538 308 530 307Q521 305 512.0 305.0Q503 305 495 307Q486 308 480 313L142 475Q129 482 129 492Q129 501 142 507L171 521Q199 534 208 539Q216 543 221 543Q225 543 234 539Q239 536 278.0 517.0Q317 498 362.0 476.0Q407 454 443 437L480 419Q486 416 495 415Q503 413 512.0 413.0Q521 413 530 415Q538 416 544 419L582 437Q620 456 666 479Q712 501 752 520Q791 539 794 541Q800 544 803.0 544.0Q806 544 812.0 541.0Q818 538 850 523L882 507Q895 499 895 490ZM895 292Q895 283 882 277L544 113Q538 110 530 109Q521 107 512.0 107.0Q503 107 495 109Q486 110 480 113L142 277Q129 283 129.0 292.0Q129 301 142 307L171 322Q199 336 208 341Q215 344 219 344Q220 344 221 344Q225 343 234 339Q239 337 278 319Q317 300 362.0 278.0Q407 256 443 239L480 221Q486 218 495 217Q503 215 512.0 215.0Q521 215 530 217Q538 218 544 221Q620 257 666.0 279.0Q712 301 752 320Q791 339 794 341Q800 344 803.0 344.0Q806 344 812.0 341.0Q818 338 850 323L882 307Q895 301 895 292Z"/></g></svg>
diff --git a/assets/icons/svg/locate.svg b/assets/icons/svg/locate.svg
new file mode 100644
index 00000000..b4b9c34c
--- /dev/null
+++ b/assets/icons/svg/locate.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M625 604Q672 557 672.0 491.0Q672 425 625.0 378.0Q578 331 512.0 331.0Q446 331 399.0 378.0Q352 425 352.0 491.0Q352 557 399.0 604.0Q446 651 512.0 651.0Q578 651 625 604ZM960 533V449H894Q886 382 857 323Q828 265 783 220Q738 174 679 145Q621 116 554 109V43H470V109Q403 116 345 145Q286 174 241 220Q196 265 167 323Q137 382 130 449H64V533H130Q138 599 167.0 658.0Q196 717 241.0 762.0Q286 807 345 836Q403 865 470 873V939H554V873Q621 865 679 836Q738 807 783.0 762.0Q828 717 857 658Q887 599 894 533ZM628 216Q682 240 723 281Q763 321 787 375Q810 429 810 491Q810 552 786 606Q763 661 723 702Q682 742 628 765Q573 789 512 789Q450 789 396 765Q342 742 302 702Q261 661 237 606Q214 552 214 491Q214 429 238 375Q261 321 302 281Q342 240 396 216Q451 193 512 193Q574 193 628 216Z"/></g></svg>
diff --git a/assets/icons/svg/location.svg b/assets/icons/svg/location.svg
new file mode 100644
index 00000000..b3b94587
--- /dev/null
+++ b/assets/icons/svg/location.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M605 856Q648 837 681 805Q713 772 731 728Q750 684 750 635Q750 548 713.0 455.0Q676 362 631 285Q586 207 549 157L512 107Q438 207 393 285Q348 362 311.0 455.0Q274 548 274 635Q274 684 293 728Q311 772 344 805Q376 837 419 856Q463 875 512 875Q562 875 605 856ZM592 552Q624 584 624 631Q624 679 591.0 712.0Q558 745 512 745Q465 745 433 712Q400 679 400 631Q400 584 433 552Q466 519 512 519Q559 519 592 552Z"/></g></svg>
diff --git a/assets/icons/svg/people.svg b/assets/icons/svg/people.svg
new file mode 100644
index 00000000..ba0a7c87
--- /dev/null
+++ b/assets/icons/svg/people.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M588 574Q552 609 552 659Q552 708 589 744Q625 779 674 779Q725 779 762 744Q798 708 798 659Q798 609 762 574Q725 539 674 539Q624 539 588 574ZM263 574Q226 609 226 659Q226 708 263 744Q299 779 350 779Q400 779 436 744Q472 708 472 659Q472 609 436 574Q399 539 350 539Q299 539 263 574ZM435 442Q485 433 531 416Q576 398 608.0 372.0Q640 346 640 311V203H64V311Q64 346 95.0 372.0Q126 398 171 416Q216 433 265.0 442.0Q314 451 350 451Q385 451 435 442ZM759 423Q808 418 853.0 405.0Q898 392 929.0 369.0Q960 346 960 311V203H704V311Q704 356 689 379Q674 401 640 427Q651 428 658 429Q665 429 674 429Q710 429 759 423Z"/></g></svg>
diff --git a/assets/icons/svg/pin.svg b/assets/icons/svg/pin.svg
new file mode 100644
index 00000000..84b0a1a6
--- /dev/null
+++ b/assets/icons/svg/pin.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M715 503Q736 473 736 437Q736 413 730.0 404.0Q724 395 706 395H544L520 43H504L480 395H318Q301 395 295 404Q288 413 288 437Q288 473 310 503Q332 532 360 547Q363 547 365.0 548.0Q367 549 368 551Q379 557 386.0 567.0Q393 577 396 589L432 825Q432 845 427 851Q421 856 412 861Q412 862 411 863Q409 863 408 863Q397 869 391 876Q384 883 384 897Q384 927 394.0 933.0Q404 939 420 939H604Q621 939 631 933Q640 927 640 897Q640 883 633.0 876.0Q626 869 616 863Q614 863 613 863Q612 862 612 861Q603 858 598 852Q592 845 592 835V825L628 589Q631 577 639 567Q646 557 656 551Q658 549 661 548Q663 547 664 547Q694 532 715 503Z"/></g></svg>
diff --git a/assets/icons/svg/ruler.svg b/assets/icons/svg/ruler.svg
new file mode 100644
index 00000000..d5905024
--- /dev/null
+++ b/assets/icons/svg/ruler.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 959.5) scale(1 -1)"><path d="M832 324 777 268Q769 260 757 257Q747 255 736 257Q725 260 716 268Q708 277 705 288Q703 299 705 309Q708 321 716 329L772 384L704 452L649 396Q641 388 629 385Q619 383 608 385Q597 388 588 396Q580 405 577 416Q575 427 577 437Q580 449 588 457L644 512L576 580L521 524Q513 516 501 513Q491 511 480 513Q469 516 460 524Q452 533 449 544Q447 555 449 565Q452 577 460 585L516 640L448 708L393 652Q385 644 373 641Q363 639 352 641Q341 644 332 652Q324 661 321 672Q319 683 321 693Q324 705 332 713L388 768L341 815Q332 823 321 828Q310 832 299 832Q287 832 276 828Q265 823 256 815L145 704Q137 695 132 684Q128 673 128 661Q128 650 132 639Q137 628 145 619L683 81Q691 73 702 68Q713 64 725.0 64.0Q737 64 748 68Q759 73 768 81L879 192Q887 201 892 212Q896 223 896.0 235.0Q896 247 892 258Q887 269 879 277ZM862 414 939 337Q959 317 970 290Q982 264 982.0 235.0Q982 206 970 179Q959 152 939 132L828 21Q808 1 781 -11Q754 -22 725.0 -22.0Q696 -22 670 -10Q643 1 623 21L85 559Q64 580 53 607Q43 633 43 661Q43 690 53 716Q64 743 85 764L196 875Q217 896 244 907Q270 917 299 917Q327 917 353 907Q380 896 401 875L478 798L606 670L734 542Z"/></g></svg>
diff --git a/assets/icons/svg/share-alt.svg b/assets/icons/svg/share-alt.svg
new file mode 100644
index 00000000..e9b3250f
--- /dev/null
+++ b/assets/icons/svg/share-alt.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M856 279Q892 242 892.0 191.0Q892 140 856 104Q819 67 768.0 67.0Q717 67 681 104Q644 140 644 191Q644 198 646 205Q647 211 648 219L344 395Q326 378 304 370Q281 361 256 361Q203 361 166 399Q128 436 128 489Q128 541 165.0 579.0Q202 617 254 617Q280 617 302 608Q324 598 342 583L644 757Q642 764 641 772Q640 779 640 787Q640 839 678.0 877.0Q716 915 768 915Q821 915 859 877Q896 839 896 787Q896 734 858 697Q820 659 768 659Q742 659 720 669Q698 678 680 693L378 519Q380 511 381 504Q382 496 382 489Q382 481 381 474Q379 466 378 459L684 283Q701 298 723 307Q744 315 768 315Q819 315 856 279Z"/></g></svg>
diff --git a/assets/icons/svg/time.svg b/assets/icons/svg/time.svg
new file mode 100644
index 00000000..cc245ff6
--- /dev/null
+++ b/assets/icons/svg/time.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M677 883Q755 849 813.0 791.0Q871 733 904 656Q938 578 938 491Q938 403 905 325Q871 248 814 190Q756 132 678 98Q600 65 512 65Q423 65 346 98Q268 132 211 190Q153 248 119 325Q86 403 86 491Q86 578 119 656Q153 733 211 791Q268 849 346.0 883.0Q424 917 512.0 917.0Q600 917 677 883ZM644 177Q706 204 753 250Q799 296 825 358Q852 420 852 491Q852 561 825 623Q799 685 753 731Q706 777 644.0 804.0Q582 831 512 831Q441 831 380 804Q318 777 272 731Q225 685 199 623Q172 561 172 491Q172 420 199 358Q225 296 272 250Q318 204 380 177Q442 151 512 151Q583 151 644 177ZM534 481 726 367 694 315 470 449V703H534Z"/></g></svg>
diff --git a/assets/icons/svg/up-b.svg b/assets/icons/svg/up-b.svg
new file mode 100644
index 00000000..6dee6a0a
--- /dev/null
+++ b/assets/icons/svg/up-b.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M831 340Q832 335 832 331Q832 317 823 308Q813 299 798 299H226Q211 299 202 308Q192 317 192 331Q192 335 194 340Q195 344 198 347L202 353L474 665Q482 672 491 678Q500 683 512.0 683.0Q524 683 534 679Q544 674 550 665L822 353L826 349Q829 344 831 340Z"/></g></svg>
diff --git a/assets/icons/svg/wifi.svg b/assets/icons/svg/wifi.svg
new file mode 100644
index 00000000..5b24c6a3
--- /dev/null
+++ b/assets/icons/svg/wifi.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" fill="currentColor"><g transform="translate(0 1003.0) scale(1 -1)"><path d="M630 800Q688 789 743 768Q797 746 847 714Q897 683 940 643L960 623L940 605L856 521L838 539Q804 569 766.0 593.0Q728 617 687 634Q645 650 601 658Q557 667 512 667Q466 667 422 658Q378 650 337 634Q296 617 258.0 593.0Q220 569 186 539L168 521L84 605L64 623L84 643Q128 683 177 714Q227 746 282 768Q336 789 394.0 800.0Q452 811 512.0 811.0Q572 811 630 800ZM816 471 796 451 730 387 712 369 694 385Q655 418 608 437Q561 455 512 455Q462 455 416 437Q369 418 332 385L312 369L294 387L228 451L208 471L230 491Q284 540 353 568Q421 596 494 599H512Q592 599 665 571Q737 543 794 491ZM512 171 388 295 366 315 390 335Q414 350 442 363Q469 375 512 375Q556 375 584.0 363.0Q612 351 636 335L658 315L532 189Z"/></g></svg>
diff --git a/scss/custom/_custom.scss b/scss/custom/_custom.scss
index 138593f9..67ab059b 100644
--- a/scss/custom/_custom.scss
+++ b/scss/custom/_custom.scss
@@ -8,3 +8,14 @@
 
 // SCSS supports css with a lot of additional features like variables or mixins.
 // Autoprefixer runs in postcss, no need to add browser-prefixes like -webkit, -moz or -ms
+
+// Test vertical-align tuning for centered SVGs
+// Adjust the variable below to test different pixel offsets
+:root {
+  --icon-va: -2px;
+}
+
+[class^="ion-"]::before,
+[class*=" ion-"]::before {
+  vertical-align: var(--icon-va);
+}
diff --git a/scss/modules/_button.scss b/scss/modules/_button.scss
index 7f7de877..9dffd7db 100644
--- a/scss/modules/_button.scss
+++ b/scss/modules/_button.scss
@@ -7,7 +7,6 @@ button {
   border-radius: 0.9em;
   color: variables.$color-black;
   cursor: pointer;
-  font-family: variables.$font-family-icons;
   font-size: variables.$button-font-size;
   height: 1.8em;
   line-height: 1.95;
diff --git a/scss/modules/_leaflet.scss b/scss/modules/_leaflet.scss
index 418ab08f..6eb6de25 100644
--- a/scss/modules/_leaflet.scss
+++ b/scss/modules/_leaflet.scss
@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "variables";
+@use "../mixins/icon";
 
 .leaflet-pane,
 .leaflet-tile,
@@ -89,10 +90,7 @@
     }
 
     &::before {
-      content: "\f229";
-      font-family: variables.$font-family-icons;
-      speak: none;
-      text-rendering: auto;
+      @include icon.icon-mask("layer");
     }
   }
 
diff --git a/scss/modules/_sidebar.scss b/scss/modules/_sidebar.scss
index 98149fe8..839a981e 100644
--- a/scss/modules/_sidebar.scss
+++ b/scss/modules/_sidebar.scss
@@ -1,6 +1,7 @@
 @use "sass:color";
 @use "sass:map";
 @use "variables";
+@use "../mixins/icon";
 
 .sidebar {
   box-sizing: border-box;
@@ -134,7 +135,7 @@
   z-index: 1010;
 
   &::before {
-    content: "\f124";
+    @include icon.icon-mask("chevron-left");
     padding-right: 0.125em;
   }
 
diff --git a/scss/modules/_table.scss b/scss/modules/_table.scss
index be40639b..343579bb 100644
--- a/scss/modules/_table.scss
+++ b/scss/modules/_table.scss
@@ -1,4 +1,5 @@
 @use "variables";
+@use "../mixins/icon";
 
 table {
   border-collapse: separate;
@@ -62,8 +63,7 @@ th {
     }
 
     &::after {
-      content: "\f10d";
-      font-family: variables.$font-family-icons;
+      @include icon.icon-mask("up-b");
       padding-left: 0.25em;
       visibility: hidden;
     }
@@ -77,7 +77,7 @@ th {
 
   &.sort-up {
     &::after {
-      content: "\f104";
+      mask-image: url("@icons/down-b.svg");
     }
   }
 
diff --git a/scss/modules/_variables.scss b/scss/modules/_variables.scss
index 56b21b24..255d1597 100644
--- a/scss/modules/_variables.scss
+++ b/scss/modules/_variables.scss
@@ -22,7 +22,6 @@ $color-error: #c20000 !default;
 $color-map-background: #f8f4f0 !default;
 
 $font-family: "Assistant", sans-serif !default;
-$font-family-icons: ionicons !default;
 $font-family-monospace: monospace !default;
 $font-size: 15px !default;
 $font-size-small: 11px !default;
diff --git a/vite.config.js b/vite.config.js
index 7ec943fe..bb5cd1c2 100644
--- a/vite.config.js
+++ b/vite.config.js
@@ -9,6 +9,7 @@ export default defineConfig({
   resolve: {
     alias: {
       "@fonts": resolve(__dirname, "assets/fonts"),
+      "@icons": resolve(__dirname, "assets/icons/svg"),
     },
   },
   define: {