Fixed some font alignment issues

src/pug/index.pug

@@ -3,7 +3,6 @@ html(lang="en")
   head
     meta(charset="utf-8")
     meta(name="viewport", content="width=device-width, initial-scale=1.0")
-    link(rel="preload" href="/fonts/material-symbols-outlined.woff2" as="font" type="font/woff2" crossorigin)
 
     title Onefinity CNC - Web interface
 
@@ -16,7 +15,6 @@ html(lang="en")
     style: include ../svelte-components/node_modules/svelte-material-ui/bare.css
     style: include ../../build/http/svelte-components/smui.css
     style: include ../../build/http/svelte-components/style.css
-    style: include ../../build/http/svelte-components/material-symbols-outlined.css
     style: include:stylus ../stylus/style.styl
 
   body(v-cloak)

src/pug/templates/control-view.pug

@@ -61,7 +61,7 @@ script#control-view-template(type="text/x-template")
                 button(@click="jog_fn(-1,0,0,0)") X-
               td(style="height:100px",align="center")
                 button(@click="ask_zero_xy_msg = true")
-                  .fa.fa-bullseye(style="font-size: 172%")
+                  .fa.fa-bullseye(style="font-size: 173%")
               td(style="height:100px",align="center")
                 button(@click="jog_fn(1,0,0,0)") X+
               td(style="height:100px",align="center")

src/svelte-components/public/material-symbols-outlined.css

@@ -1,28 +0,0 @@
-/* To browse the icons in material-symbols, see https://marella.me/material-symbols/demo/ */
-
-@font-face {
-    font-family: "Material Symbols Outlined";
-    font-style: normal;
-    font-weight: 100 700;
-    font-display: block;
-    src: url("./fonts/material-symbols-outlined.woff2") format("woff2");
-  }
-  .material-symbols-outlined {
-    font-family: "Material Symbols Outlined";
-    font-weight: normal;
-    font-style: normal;
-    font-size: 24px;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    text-rendering: optimizeLegibility;
-    font-feature-settings: "liga";
-
-    font-variation-settings: "FILL" 1, "wght" 400, "GRAD" 0, "opsz" 48;
-  }

src/svelte-components/src/components/AdminNetworkView.svelte

@@ -15,22 +15,24 @@
     network: {} as WifiNetwork,
   };
 
-  function getWifiStrengthIcon(network: WifiNetwork) {
+  function getWifiStrengthStyle(network: WifiNetwork) {
     const strength = Math.ceil((Number(network.Quality) / 100) * 4);
 
     switch (strength) {
       case 0:
+        return "clip-path: circle(0px at 12.5px 19px);";
+
       case 1:
-        return "";
+        return "clip-path: circle(4px at 12.5px 19px);";
 
       case 2:
-        return "wifi_1_bar";
+        return "clip-path: circle(8px at 12.5px 19px);";
 
       case 3:
-        return "wifi_2_bar";
+        return "clip-path: circle(14px at 12.5px 19px);";
 
       case 4:
-        return "wifi";
+        return "";
     }
   }
 
@@ -104,17 +106,16 @@
                       ? 'active'
                       : ''}"
                   >
-                    <span class="material-symbols-outlined background"
+                    <span class="fa fa-wifi background" />
-                      >wifi</span
+                    <span
-                    >
+                      class="fa fa-wifi"
-                    <span class="material-symbols-outlined">
+                      style={getWifiStrengthStyle(network)}
-                      {getWifiStrengthIcon(network)}
+                    />
-                    </span>
                   </Graphic>
                   <Text style="margin-right: 20px;">{network.Name}</Text>
                   {#if network.Encryption !== "Open"}
                     <Meta>
-                      <span class="material-symbols-outlined lock">lock</span>
+                      <span class="fa fa-lock" />
                     </Meta>
                   {/if}
                 </Item>
@@ -189,8 +190,8 @@
 
           span {
             position: absolute;
-            width: 24px;
+            top: 5px;
-            height: 24px;
+            font-size: 22px;
 
             &.background {
               opacity: 0.25;

src/svelte-components/src/dialogs/WifiConnectionDialog.svelte

@@ -48,7 +48,9 @@
   aria-labelledby="wifi-connection-dialog-title"
   aria-describedby="wifi-connection-dialog-content"
 >
-  <Title id="wifi-connection-dialog-title">{connectToOrDisconnectFrom} {network.Name}</Title>
+  <Title id="wifi-connection-dialog-title"
+    >{connectToOrDisconnectFrom} {network.Name}</Title
+  >
 
   <Content id="wifi-connection-dialog-content">
     {#if needPassword}
@@ -64,9 +66,7 @@
           slot="trailingIcon"
           on:click={() => (showPassword = !showPassword)}
         >
-          <Icon class="material-symbols-outlined">
+          <Icon class={`fa ${showPassword ? "fa-eye-slash" : "fa-eye"}`} />
-            {showPassword ? "password" : "abc"}
-          </Icon>
         </div>
         <HelperText persistent slot="helper">
           Wifi passwords must be 8 to 128 characters