version 1.2.7

machineinteractive · machineinteractive · commit d839c43d2059 · 2026-01-25T09:30:28.000-05:00
Switch to inline SVG icons, and remove icon fonts.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,20 @@
 # Changelog
 
+## [1.2.7] - 2026-01-25
+
+### Added
+
+- Switched to inline SVG icons
+
+### Changed
+
+- Update screenshot
+
+### Removed
+
+- Removed icon fonts
+
+
 ## [1.2.6] - 2026-01-24
 
 ### Changed
@@ -8,7 +23,6 @@
 - Update screenshot
 
 
-
 ## [1.2.5] - 2026-01-24
 
 ### Changed
diff --git a/index.html b/index.html
@@ -110,9 +110,11 @@
         <div class="header-spacer"></div>
         <p class="ibm-plex-mono-semibold">mfp;</p>
         <button id="about-button">
-          <span class="material-symbols-outlined player-button mini">
-            info
-          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+            class="material-symbols-outlined player-button mini">
+            <path
+              d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+          </svg>
         </button>
       </div>
     </header>
@@ -906,54 +908,67 @@
         <div id="mini-player-controls">
 
           <button id="mp-button-random">
-            <span class="material-symbols-outlined player-button small">
-              shuffle
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M560-160v-80h104L537-367l57-57 126 126v-102h80v240H560Zm-344 0-56-56 504-504H560v-80h240v240h-80v-104L216-160Zm151-377L160-744l56-56 207 207-56 56Z" />
+            </svg>
           </button>
 
 
           <button id="mp-button-skip-prev" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              skip_previous
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path d="M220-240v-480h80v480h-80Zm520 0L380-480l360-240v480Zm-80-240Zm0 90v-180l-136 90 136 90Z" />
+            </svg>
           </button>
 
 
           <button id="mp-button-seek-back" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              replay
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80ZM300-320v-60h100v-40h-60v-40h60v-40H300v-60h120q17 0 28.5 11.5T460-520v160q0 17-11.5 28.5T420-320H300Zm240 0q-17 0-28.5-11.5T500-360v-160q0-17 11.5-28.5T540-560h80q17 0 28.5 11.5T660-520v160q0 17-11.5 28.5T620-320h-80Zm20-60h40v-120h-40v120Z" />
+            </svg>
           </button>
 
           <button id="mp-button-play" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button large">
-              play_circle
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button large">
+              <path
+                d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+            </svg>
           </button>
 
           <button id="mp-button-pause" class="player-controls-disabled hidden">
-            <span class="material-symbols-outlined player-button large">
-              pause_circle
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button large">
+              <path
+                d="M360-320h80v-320h-80v320Zm160 0h80v-320h-80v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+            </svg>
           </button>
 
           <button id="mp-button-seek-forward" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              forward_media
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M300-320v-60h100v-40h-60v-40h60v-40H300v-60h120q17 0 28.5 11.5T460-520v160q0 17-11.5 28.5T420-320H300Zm240 0q-17 0-28.5-11.5T500-360v-160q0-17 11.5-28.5T540-560h80q17 0 28.5 11.5T660-520v160q0 17-11.5 28.5T620-320h-80Zm20-60h40v-120h-40v120ZM480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-800h6l-62-62 56-58 160 160-160 160-56-58 62-62h-6q-117 0-198.5 81.5T200-440q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440h80q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z" />
+            </svg>
           </button>
 
           <button id="mp-button-skip-next" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              skip_next
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />
+            </svg>
           </button>
 
-
           <button id="mp-button-playlist" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              summarize
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M320-600q17 0 28.5-11.5T360-640q0-17-11.5-28.5T320-680q-17 0-28.5 11.5T280-640q0 17 11.5 28.5T320-600Zm0 160q17 0 28.5-11.5T360-480q0-17-11.5-28.5T320-520q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440Zm0 160q17 0 28.5-11.5T360-320q0-17-11.5-28.5T320-360q-17 0-28.5 11.5T280-320q0 17 11.5 28.5T320-280ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h440l200 200v440q0 33-23.5 56.5T760-120H200Zm0-80h560v-400H600v-160H200v560Zm0-560v160-160 560-560Z" />
+            </svg>
           </button>
 
         </div>
@@ -966,9 +981,11 @@
       <div class="modal-header">
         <!-- <img id="about-close-button" src="close.svg" alt="Close About" width="24" height="24"> -->
         <button id="about-close-button">
-          <span class="material-symbols-outlined player-button mini">
-            close
-          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+            class="material-symbols-outlined player-button mini">
+            <path
+              d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+          </svg>
         </button>
       </div>
 
@@ -1012,9 +1029,11 @@ <h4>mfp; version: 1.2.6</h4>
     <div class="modal-container">
       <div class="modal-header">
         <button id="playlist-close-button">
-          <span class="material-symbols-outlined player-button mini">
-            close
-          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+            class="material-symbols-outlined player-button mini">
+            <path
+              d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+          </svg>
         </button>
       </div>
 
diff --git a/package.json b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mfp-app",
   "private": true,
-  "version": "1.2.6",
+  "version": "1.2.7",
   "type": "module",
   "scripts": {
     "dev": "vite --host",
diff --git a/public/assets/material-symbols.woff b/public/assets/material-symbols.woff
diff --git a/public/screenshot.png b/public/screenshot.png
diff --git a/src/style.css b/src/style.css
@@ -42,32 +42,6 @@
   --button-size-large: var(--size-56);
 }
 
-/* 
-
-Material Symbols
-
-*/
-@font-face {
-  font-family: 'Material Symbols Outlined';
-  font-style: normal;
-  src: url("/assets/material-symbols.woff") format('woff');
-}
-
-.material-symbols-outlined {
-  font-family: 'Material Symbols Outlined';
-  font-weight: normal;
-  font-style: normal;
-  font-size: var(--default-button-size);
-  /* Preferred icon size */
-  display: inline-block;
-  line-height: 1;
-  text-transform: none;
-  letter-spacing: normal;
-  word-wrap: normal;
-  white-space: nowrap;
-  direction: ltr;
-}
-
 *,
 *::before,
 *::after {
@@ -354,26 +328,29 @@ footer {
 
 .player-button {
   cursor: pointer;
-  color: var(--c-green);
+  fill: var(--c-green);
 }
 
 .player-button:not(.player-controls-disabled):hover {
   filter: brightness(200%);
 }
 
 .player-button.mini {
-  font-size: var(--default-button-size);
+  width: var(--default-button-size);
+  height: var(--default-button-size);
 }
 
 
 .player-button.small {
   cursor: pointer;
-  font-size: var(--button-size-small);
+  width: var(--button-size-small);
+  height: var(--button-size-small);
 }
 
 .player-button.large {
   cursor: pointer;
-  font-size: var(--button-size-large);
+  width: var(--button-size-large);
+  height: var(--button-size-large);
 }
 
 .player-controls-disabled {
diff --git a/templates/index.html b/templates/index.html
@@ -110,9 +110,11 @@
         <div class="header-spacer"></div>
         <p class="ibm-plex-mono-semibold">mfp;</p>
         <button id="about-button">
-          <span class="material-symbols-outlined player-button mini">
-            info
-          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+            class="material-symbols-outlined player-button mini">
+            <path
+              d="M440-280h80v-240h-80v240Zm40-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+          </svg>
         </button>
       </div>
     </header>
@@ -146,54 +148,67 @@
         <div id="mini-player-controls">
 
           <button id="mp-button-random">
-            <span class="material-symbols-outlined player-button small">
-              shuffle
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M560-160v-80h104L537-367l57-57 126 126v-102h80v240H560Zm-344 0-56-56 504-504H560v-80h240v240h-80v-104L216-160Zm151-377L160-744l56-56 207 207-56 56Z" />
+            </svg>
           </button>
 
 
           <button id="mp-button-skip-prev" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              skip_previous
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path d="M220-240v-480h80v480h-80Zm520 0L380-480l360-240v480Zm-80-240Zm0 90v-180l-136 90 136 90Z" />
+            </svg>
           </button>
 
 
           <button id="mp-button-seek-back" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              replay
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440h80q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440q0-117-81.5-198.5T480-720h-6l62 62-56 58-160-160 160-160 56 58-62 62h6q75 0 140.5 28.5t114 77q48.5 48.5 77 114T840-440q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80ZM300-320v-60h100v-40h-60v-40h60v-40H300v-60h120q17 0 28.5 11.5T460-520v160q0 17-11.5 28.5T420-320H300Zm240 0q-17 0-28.5-11.5T500-360v-160q0-17 11.5-28.5T540-560h80q17 0 28.5 11.5T660-520v160q0 17-11.5 28.5T620-320h-80Zm20-60h40v-120h-40v120Z" />
+            </svg>
           </button>
 
           <button id="mp-button-play" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button large">
-              play_circle
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button large">
+              <path
+                d="m380-300 280-180-280-180v360ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+            </svg>
           </button>
 
           <button id="mp-button-pause" class="player-controls-disabled hidden">
-            <span class="material-symbols-outlined player-button large">
-              pause_circle
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button large">
+              <path
+                d="M360-320h80v-320h-80v320Zm160 0h80v-320h-80v320ZM480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z" />
+            </svg>
           </button>
 
           <button id="mp-button-seek-forward" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              forward_media
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M300-320v-60h100v-40h-60v-40h60v-40H300v-60h120q17 0 28.5 11.5T460-520v160q0 17-11.5 28.5T420-320H300Zm240 0q-17 0-28.5-11.5T500-360v-160q0-17 11.5-28.5T540-560h80q17 0 28.5 11.5T660-520v160q0 17-11.5 28.5T620-320h-80Zm20-60h40v-120h-40v120ZM480-80q-75 0-140.5-28.5t-114-77q-48.5-48.5-77-114T120-440q0-75 28.5-140.5t77-114q48.5-48.5 114-77T480-800h6l-62-62 56-58 160 160-160 160-56-58 62-62h-6q-117 0-198.5 81.5T200-440q0 117 81.5 198.5T480-160q117 0 198.5-81.5T760-440h80q0 75-28.5 140.5t-77 114q-48.5 48.5-114 77T480-80Z" />
+            </svg>
           </button>
 
           <button id="mp-button-skip-next" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              skip_next
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path d="M660-240v-480h80v480h-80Zm-440 0v-480l360 240-360 240Zm80-240Zm0 90 136-90-136-90v180Z" />
+            </svg>
           </button>
 
-
           <button id="mp-button-playlist" class="player-controls-disabled">
-            <span class="material-symbols-outlined player-button small">
-              summarize
-            </span>
+            <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+              class="material-symbols-outlined player-button small">
+              <path
+                d="M320-600q17 0 28.5-11.5T360-640q0-17-11.5-28.5T320-680q-17 0-28.5 11.5T280-640q0 17 11.5 28.5T320-600Zm0 160q17 0 28.5-11.5T360-480q0-17-11.5-28.5T320-520q-17 0-28.5 11.5T280-480q0 17 11.5 28.5T320-440Zm0 160q17 0 28.5-11.5T360-320q0-17-11.5-28.5T320-360q-17 0-28.5 11.5T280-320q0 17 11.5 28.5T320-280ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h440l200 200v440q0 33-23.5 56.5T760-120H200Zm0-80h560v-400H600v-160H200v560Zm0-560v160-160 560-560Z" />
+            </svg>
           </button>
 
         </div>
@@ -206,9 +221,11 @@
       <div class="modal-header">
         <!-- <img id="about-close-button" src="close.svg" alt="Close About" width="24" height="24"> -->
         <button id="about-close-button">
-          <span class="material-symbols-outlined player-button mini">
-            close
-          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+            class="material-symbols-outlined player-button mini">
+            <path
+              d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+          </svg>
         </button>
       </div>
 
@@ -252,9 +269,11 @@ <h4>mfp; version: {{ app_version }}</h4>
     <div class="modal-container">
       <div class="modal-header">
         <button id="playlist-close-button">
-          <span class="material-symbols-outlined player-button mini">
-            close
-          </span>
+          <svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#1f1f1f"
+            class="material-symbols-outlined player-button mini">
+            <path
+              d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z" />
+          </svg>
         </button>
       </div>
 

Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "mfp-app",`
`3`	`3`	`"private": true,`
`4`		`- "version": "1.2.6",`
	`4`	`+ "version": "1.2.7",`
`5`	`5`	`"type": "module",`
`6`	`6`	`"scripts": {`
`7`	`7`	`"dev": "vite --host",`