From 996eb4878f81240e60d69a1b20cefcae04d4a3b1 Mon Sep 17 00:00:00 2001
From: Willian Galvani <williangalvani@gmail.com>
Date: Thu, 20 Feb 2025 13:03:28 -0300
Subject: [PATCH] frontend: update networking widgets for using the pi svg with
 css colors

---
 .../{public => src/assets}/img/icons/pi.svg   |  2 +-
 .../src/components/wifi/WifiTrayMenu.vue      |  2 +-
 core/frontend/src/widgets/Networking.vue      | 20 ++++++++++++++++---
 core/frontend/src/widgets/WifiNetworking.vue  | 18 +++++++++++++++--
 4 files changed, 35 insertions(+), 7 deletions(-)
 rename core/frontend/{public => src/assets}/img/icons/pi.svg (99%)

diff --git a/core/frontend/public/img/icons/pi.svg b/core/frontend/src/assets/img/icons/pi.svg
similarity index 99%
rename from core/frontend/public/img/icons/pi.svg
rename to core/frontend/src/assets/img/icons/pi.svg
index 518d46139a..b479077640 100644
--- a/core/frontend/public/img/icons/pi.svg
+++ b/core/frontend/src/assets/img/icons/pi.svg
@@ -37,7 +37,7 @@
      inkscape:groupmode="layer"
      id="layer1"
      transform="translate(-4.7110638,-0.72454897)"><path
-       style="fill:#000000"
+       style="fill:var(--v-outline-base)"
        d="m 47.333283,60.992283 c -0.13639,-0.0997 -0.19745,-0.3009 -0.23065,-0.75982 l -0.0451,-0.62417 -1.60103,0.0651 c -0.88056,0.0358 -9.188238,0.0654 -18.461506,0.0657 -15.258195,6e-4 -16.928918,-0.0148 -17.580576,-0.16198 -2.045822,-0.46207 -3.622204,-1.98604 -4.406186,-4.2597 l -0.273987,-0.7946 -0.01899,-23.88773 C 4.700318,11.845957 4.722958,6.5876856 4.82111,5.9992866 c 0.426117,-2.553394 2.15116,-4.482942 4.568495,-5.110093 0.533626,-0.138444 4.288737,-0.155551 35.906098,-0.163576 27.207304,-0.0069 35.412714,0.01844 35.757104,0.110435 0.88768,0.237125 2.78111,1.382146 2.78111,1.681825 0,0.04163 -3.25166,0.106995 -7.22591,0.14525 l -7.22592,0.06955 -0.21545,0.21948 -0.21544,0.219479 -0.0329,6.8862684 c -0.031,6.502327 -0.023,6.893456 0.14343,7.015197 0.23534,0.172101 3.17233,0.239121 9.58224,0.218661 l 4.99092,-0.0159 1.7e-4,2.32369 1.8e-4,2.32369 -4.89177,-0.0332 c -2.69047,-0.0183 -5.88017,-0.0247 -7.08822,-0.0144 -2.19266,0.0188 -2.19686,0.0193 -2.44208,0.26448 l -0.24563,0.24564 -0.0626,6.9124 c -0.0477,5.26142 -0.0344,6.95758 0.0555,7.10153 0.065,0.10402 0.23109,0.23512 0.36917,0.29134 0.16596,0.0675 2.63331,0.0938 7.27834,0.0774 l 7.02727,-0.0248 -1e-5,2.40797 v 2.40799 l -7.16554,0.0255 -7.16555,0.0255 -0.20905,0.28002 c -0.20798,0.27858 -0.20906,0.31672 -0.20936,7.4196 -2.5e-4,5.72504 0.0253,7.16516 0.12878,7.2687 0.10309,0.10311 1.6,0.13451 7.43066,0.15584 6.86781,0.0251 7.29878,0.0369 7.25449,0.19865 -0.0259,0.0946 -0.0744,0.33447 -0.10781,0.53313 -0.12384,0.73667 -1.19082,1.6615 -2.31519,2.00673 -0.6501,0.19961 -0.90896,0.20696 -8.36856,0.23755 -7.160781,0.0294 -11.980494,-0.0548 -12.475214,-0.21793 -0.19305,-0.0637 -0.21338,-0.0223 -0.27402,0.55782 -0.10781,1.03151 -0.0851,1.0221 -2.55822,1.05814 -2.58356,0.0376 -2.57117,0.0422 -2.57097,-0.95154 l 1.4e-4,-0.66816 -1.61418,0.0281 c -0.88779,0.0155 -1.66288,0.0449 -1.72243,0.0653 -0.0681,0.0234 -0.0915,0.23899 -0.0631,0.58127 0.038,0.45795 0.0118,0.57742 -0.16489,0.75417 -0.1989,0.19891 -0.30876,0.21001 -2.0782,0.21001 -1.42214,0 -1.91249,-0.0324 -2.0537,-0.13564 z M 40.48601,55.926962 c 0.740958,-0.367103 1.591778,-1.04768 2.17877,-1.742848 l 0.963093,-1.14058 -1.67982,-0.705115 c -2.872877,-1.205931 -5.508098,-1.268314 -7.946581,-0.18816 -1.712781,0.75873 -1.871907,1.01496 -1.223154,1.969696 1.110886,1.634808 3.538917,2.752594 5.487228,2.526105 0.552632,-0.06429 1.551841,-0.387829 2.220464,-0.719098 z m -10.626509,-5.6786 c 0.674177,-0.815583 0.419452,-2.680163 -0.65042,-4.761002 -1.557108,-3.028517 -2.793367,-4.118112 -4.672381,-4.118112 -1.776366,0 -2.571017,0.939382 -2.571017,3.039285 0,3.450673 3.350055,6.787146 6.475285,6.449066 0.677437,-0.07328 1.13958,-0.271765 1.418533,-0.609237 z m 19.773747,0.372452 c 0,-2.546247 4.054399,-3.282588 4.110831,-6.540538 0.02661,-1.536436 -0.01187,-1.677701 -0.592349,-2.177032 -0.487179,-0.419055 -0.87761,-0.533996 -1.813899,-0.533996 -1.011586,0 -1.379854,0.127463 -2.420712,0.837321 -1.51778,1.035238 -2.242002,1.893309 -2.795465,3.312195 -0.909449,2.331472 -0.810045,4.374409 0.248943,5.116145 0.616043,0.431486 1.779117,0.426473 3.262651,-0.01349 z m -8.548007,-2.0571 c 1.316697,-0.681691 2.686891,-2.320792 2.942707,-3.52025 0.384019,-1.800532 -0.202411,-3.658885 -1.55675,-4.93311 -1.195825,-1.125114 -2.133274,-1.489901 -4.094014,-1.593085 -4.063263,-0.213788 -6.58693,1.898164 -6.58693,5.512583 0,1.393304 0.325449,2.064227 1.600913,3.300394 1.53501,1.487719 2.619374,1.886116 4.874374,1.790865 1.383618,-0.05844 2.147716,-0.209515 2.8197,-0.557397 z m 15.226237,-9.08065 c 0.756265,-0.861352 1.385491,-2.654196 1.370121,-3.903896 -0.02045,-1.655266 -1.144177,-3.655357 -2.528027,-4.499175 -1.096564,-0.668652 -1.386963,-0.554116 -2.054529,0.810345 -0.543748,1.111378 -0.593317,1.407196 -0.482136,2.877293 0.130116,1.720502 0.845159,3.820204 1.751252,5.142559 0.596494,0.870525 0.853566,0.814032 1.943319,-0.427126 z m -34.822196,-0.10341 c 1.087015,-2.526846 1.471434,-5.873391 0.907825,-7.903021 -0.392145,-1.412165 -1.160269,-1.352682 -2.910481,0.225387 -1.892812,1.706633 -2.269576,3.894028 -1.080557,6.273451 0.669831,1.340452 1.746812,2.500747 2.321178,2.500747 0.159677,0 0.502582,-0.49344 0.762035,-1.096564 z M 47.04531,38.673843 c 0,-1.99167 3.501168,-2.91886 3.50077,-5.295313 -1.98e-4,-1.176999 -0.881175,-3.270404 -1.868502,-4.439985 -1.432985,-1.697482 -4.481525,-2.371171 -6.504536,-1.43741 -1.164202,0.537369 -2.485503,1.889713 -2.811534,2.877584 -0.364216,1.103602 -0.132904,3.306756 0.485807,4.626998 0.668121,1.425698 2.374575,3.099465 3.603204,3.534211 1.149222,0.406622 2.439561,0.454708 3.594791,0.133981 z M 32.655101,38.146075 c 3.463593,-1.755146 4.721553,-6.607756 2.432765,-9.384447 -0.956561,-1.160476 -1.826209,-1.541158 -3.520898,-1.541247 -4.13772,-2.47e-4 -7.458348,4.052739 -6.374648,7.780528 0.378598,1.302325 1.676241,2.938145 2.67621,3.373632 1.174051,0.511314 3.550544,0.397878 4.786571,-0.228466 z M 24.564588,27.326533 c 2.421891,0 3.744557,-2.313689 4.987647,-3.924984 0.781178,-1.012534 0.903628,-1.294233 0.679827,-1.563884 -0.740009,-0.891656 -3.709765,-0.667213 -5.303468,0.400846 -1.459316,0.97798 -2.112837,2.23375 -2.246521,4.316838 -0.05789,0.902087 -0.05292,1.640158 0.01102,1.640158 0.06395,0 0.793596,-0.868974 1.87147,-0.868974 z m 28.598556,-0.342329 c 0,-0.669741 -0.32506,-1.663538 -0.569556,-2.216261 -0.596402,-1.348275 -2.122761,-2.964289 -3.106457,-3.288927 -0.837566,-0.276441 -3.773774,-0.150842 -4.099723,0.175346 -0.328131,0.328346 0.55253,1.696179 2.06736,3.211011 1.066611,1.066621 2.034237,1.769308 3.328291,2.417009 2.443377,1.222948 2.380085,1.219314 2.380085,-0.298133 z M 40.563556,25.832317 c 0,-1.315769 2.390985,-1.627548 2.390985,-2.516665 0,-0.856744 -1.32269,-2.343792 -2.506864,-2.818348 -1.318654,-0.528444 -3.873815,-0.501602 -5.129609,0.05395 -1.110517,0.491237 -2.411384,1.864714 -2.411384,2.545978 0,0.617307 0.767074,1.838367 1.426176,2.270235 1.292252,0.846696 6.230696,2.367745 6.230696,0.464891 z m -8.798444,-6.659414 c -0.821119,-0.682338 1.81143,-1.41756 1.81143,-1.933595 0,-0.587364 -1.531769,-1.800982 -4.912289,-3.892002 -4.720451,-2.919839 -5.173942,-3.3965523 -3.01956,-3.174203 1.457574,0.150439 4.660597,1.608848 6.885355,3.135065 2.142588,1.46985 3.425246,1.40318 3.9562,-0.205625 0.304664,-0.923137 0.149448,-2.264749 -0.381266,-3.2957165 -0.828604,-1.6096205 -2.792871,-3.4933101 -3.642744,-3.4933101 -0.223566,0 -0.223095,0.068687 0.0023,0.340323 0.459942,0.5541966 0.03821,0.6707774 -0.522142,0.1443457 -0.28372,-0.2665651 -0.59437,-0.4846662 -0.690304,-0.4846662 -0.09593,0 -0.466277,-0.2077734 -0.82293,-0.4617763 L 29.780761,5.3899603 v 0.461775 c 0,0.253977 0.08972,0.4617762 0.199401,0.4617762 0.109664,0 0.259879,0.1576083 0.333801,0.3502467 0.100558,0.2620439 -0.01349,0.2339265 -0.452795,-0.1116349 -0.322958,-0.254037 -0.692771,-0.4618876 -0.821803,-0.4618876 -0.129036,0 -0.467155,-0.2184634 -0.751386,-0.4854949 -0.542261,-0.5094252 -0.689155,-0.2537958 -0.286497,0.498575 0.214573,0.4009224 0.18789,0.4122548 -0.390749,0.1659959 C 27.269161,6.1239538 26.763619,5.8057147 26.487302,5.5621296 L 25.984909,5.1192484 v 0.7087805 c 0,0.8544628 -0.277674,0.890592 -1.157148,0.1505719 -0.934274,-0.786138 -1.195662,-0.6933688 -0.629137,0.2232954 0.591523,0.9571067 0.296294,1.028129 -1.217199,0.2928149 -1.158658,-0.5629184 -1.532948,-0.4112621 -0.830469,0.3364908 0.266566,0.2837492 0.484666,0.5921716 0.484666,0.6853839 0,0.093227 -0.854301,0.1369715 -1.898448,0.097241 -1.651777,-0.062837 -1.898384,-0.023903 -1.89793,0.2997606 2.87e-4,0.2045926 0.402914,0.6906872 0.894726,1.0802122 1.017015,0.8054896 0.982026,1.1155864 -0.125888,1.1155864 -0.955208,0 -0.985618,0.348301 -0.07401,0.847708 0.381869,0.209202 0.909382,0.552859 1.172251,0.763686 0.472797,0.379197 0.468931,0.3834 -0.359383,0.390748 -1.121106,0.0099 -1.057104,0.38189 0.158216,0.919487 1.334654,0.59038 1.409866,0.805823 0.344177,0.985873 -1.089299,0.184023 -1.009063,0.370555 0.383458,0.891393 1.591544,0.595299 1.859779,0.869739 0.983759,1.00653 -1.139585,0.178043 -0.84463,0.531704 0.739466,0.886891 1.593975,0.357391 1.841013,0.61225 0.796032,0.821249 -0.916399,0.183214 -0.840995,0.475121 0.167456,0.648151 0.460525,0.07913 1.13875,0.22525 1.507178,0.324907 l 0.669858,0.181191 -0.614036,0.02023 c -1.039894,0.03426 -0.677702,0.466712 0.390749,0.466712 0.592387,0 1.004787,0.102505 1.004787,0.249914 0,0.414153 5.666183,0.306277 4.887143,-0.341094 z m 17.553073,0.33455 c 1.185478,0.923425 1.542776,-0.157812 0.948964,-0.454686 -1.01225,-0.505984 -0.723908,-0.738431 0.709654,-0.572053 0.776472,0.09014 1.488936,0.06115 1.723418,-0.07014 0.351324,-0.196702 0.299183,-0.271628 -0.430544,-0.619623 -0.456652,-0.217833 -0.830279,-0.46388 -0.830279,-0.546922 0,-0.08295 0.707071,-0.240247 1.571265,-0.349388 1.723073,-0.217609 2.063305,-0.528128 0.940701,-0.85861 -0.399122,-0.117571 -0.725681,-0.284623 -0.725681,-0.371374 0,-0.08678 0.619794,-0.342801 1.377315,-0.569021 1.596189,-0.476635 1.982928,-0.967192 0.762509,-0.967192 -0.945931,0 -1.059002,-0.333179 -0.187328,-0.551958 1.154365,-0.289727 1.602733,-1.011041 0.628462,-1.011041 -0.845005,0 -0.898157,-0.410205 -0.108758,-0.839404 0.393163,-0.213765 0.975366,-0.604269 1.293778,-0.867786 L 57.570595,10.37913 56.575699,10.182384 55.580805,9.985637 56.52446,8.9618921 c 0.51901,-0.5630588 0.943654,-1.1381054 0.943654,-1.2778797 0,-0.3897564 -0.975661,-0.3031083 -2.252069,0.2000052 L 54.063874,8.3381614 54.174273,7.8281953 C 54.234993,7.5477165 54.35859,7.1423929 54.448926,6.9274814 54.679009,6.3801033 54.012776,6.4120993 53.286607,6.9832924 52.5663,7.5498862 51.999832,7.5795996 52.222338,7.0391154 52.736698,5.7897056 52.691153,5.7600264 51.3632,6.4792765 50.668263,6.85567 50.099679,7.119518 50.099679,7.065605 c 0,-0.053914 0.159385,-0.3412654 0.354177,-0.6385623 0.194791,-0.2972969 0.292886,-0.6397054 0.217967,-0.7609102 -0.172513,-0.2791411 -2.19669,0.6407935 -2.933932,1.3333973 -0.655201,0.6155291 -0.695686,0.3519577 -0.0968,-0.6302714 0.441835,-0.7246647 0.441829,-0.7256793 -0.0059,-0.7256793 -0.246551,0 -0.884303,0.4019161 -1.417224,0.8931439 -0.532919,0.4912289 -1.026052,0.8931439 -1.095853,0.8931439 -0.0698,0 -0.03516,-0.3199005 0.07697,-0.7108906 0.112137,-0.3909901 0.149673,-0.7651071 0.0834,-0.8313684 -0.06628,-0.066276 -0.541819,0.3232112 -1.056788,0.8655051 -0.902149,0.9500127 -0.939036,0.9660903 -1.011039,0.4406194 -0.132476,-0.9668834 -0.396002,-0.9273577 -1.687636,0.2531227 -1.300334,1.1884311 -2.20461,2.5190268 -2.460003,3.6197689 -0.36607,1.577736 1.066938,3.704287 2.289425,3.397461 0.310274,-0.07788 1.525229,-0.731916 2.699895,-1.453428 3.275429,-2.011851 7.285343,-3.5348817 7.841788,-2.978438 0.296952,0.296953 -0.01687,0.607784 -1.351954,1.339324 -2.794024,1.530873 -6.64174,3.98117 -7.42425,4.72792 -0.996102,0.950555 -1.052195,1.535625 -0.223296,2.328953 1.280781,1.225781 3.401377,-1.271968 6.419464,1.078963 z m 34.299122,35.0402 -0.0317,-0.22348 -3.52028,-0.0122 -3.52029,-0.0122 -0.22924,-0.26651 c -0.19505,-0.22676 -0.22925,-0.37682 -0.22925,-1.00592 0,-1.02518 0.12563,-1.14609 1.11207,-1.0703 0.69459,0.0534 0.84737,0.10018 1.52005,0.46572 0.25067,0.13622 0.65856,0.16203 2.56921,0.16254 l 2.27123,6.1e-4 -0.0599,-0.22348 c -0.0329,-0.12291 -0.0605,-0.5418 -0.0612,-0.93086 l -0.001,-0.70737 -1.36572,-0.0564 c -2.17273,-0.0898 -4.1281,-0.25821 -4.23467,-0.36478 -0.054,-0.054 -0.10101,-0.31108 -0.10449,-0.57132 l -0.006,-0.47315 2.78111,-0.0497 2.78111,-0.0497 0.0281,-0.94359 0.0281,-0.94359 -3.3791,-0.002 c -4.11022,-0.002 -3.82857,0.10314 -3.82857,-1.42687 0,-1.0833 0.116,-1.42781 0.53474,-1.58808 0.15375,-0.0589 1.98357,-0.11222 4.48119,-0.13071 l 4.22132,-0.0312 0.0187,5.27597 0.0187,5.27597 -0.51528,0.0619 c -0.99247,0.11923 -1.24296,0.0879 -1.27814,-0.15985 z m -0.5532,-7.7863 0.37247,-0.0616 v -0.53329 -0.5333 h -2.44424 -2.44424 l 0.0672,0.27315 c 0.12919,0.52545 0.31936,0.70361 0.82159,0.76971 0.26053,0.0343 0.54073,0.0767 0.62267,0.0942 0.27983,0.0598 2.63124,0.0528 3.00459,-0.009 z m 0.57112,-12.3562 c 0,-0.0703 -1.13727,-0.0992 -3.53272,-0.09 -4.23667,0.0164 -3.91668,0.11849 -3.91668,-1.24985 0,-0.67264 0.0377,-0.94732 0.14187,-1.03378 0.16228,-0.13468 1.57363,-0.01 2.65583,0.23465 0.67691,0.15301 3.71883,0.40053 4.19783,0.34156 0.29011,-0.0357 0.29115,-0.0383 0.31679,-0.78077 0.0393,-1.13731 0.0822,-1.09182 -1.03669,-1.09718 -1.12808,-0.005 -4.1629,-0.24066 -4.41058,-0.34192 -0.21149,-0.0865 -0.3411,-0.69674 -0.18732,-0.88203 0.082,-0.0988 0.59755,-0.15085 1.97294,-0.19905 1.02404,-0.0359 2.25298,-0.0927 2.73098,-0.12624 l 0.8691,-0.061 v -0.32097 c 0,-0.17653 -0.0275,-0.5214 -0.0611,-0.76638 l -0.061,-0.44541 -3.25945,-0.0583 c -3.52823,-0.0631 -3.60378,-0.0753 -3.85389,-0.62424 -0.21291,-0.46728 -0.0788,-2.10851 0.19466,-2.38196 0.11425,-0.11425 0.78759,-0.14527 3.64411,-0.16788 2.80461,-0.0222 3.52044,-0.0544 3.58651,-0.16128 0.0646,-0.10446 0.26922,-0.118 0.9396,-0.0622 l 0.85706,0.0714 v 5.09051 5.09051 l -0.37247,0.0616 c -0.59133,0.0977 -1.41538,0.0745 -1.41538,-0.0399 z m -0.19865,-7.84696 v -0.59139 l -2.30931,0.001 c -1.27013,8.4e-4 -2.366,0.0375 -2.43529,0.0815 -0.11987,0.0761 -0.32099,0.62631 -0.32099,0.87817 0,0.1664 0.25796,0.1852 2.80594,0.2045 l 2.25965,0.0171 z m 0.16987,-11.517172 c -0.0507,-0.193948 -0.13548,-0.198651 -3.58053,-0.198651 h -3.52858 l -0.20542,-0.288477 c -0.16002,-0.22473 -0.20511,-0.438732 -0.20406,-0.968422 0.002,-1.188069 -0.0298,-1.155143 1.08401,-1.110408 0.81144,0.03259 1.00759,0.07437 1.2886,0.274465 0.38032,0.270816 1.25502,0.372615 3.66573,0.426621 1.38535,0.03104 1.4197,0.02679 1.36707,-0.169055 -0.0297,-0.110491 -0.0546,-0.536984 -0.0553,-0.947762 l -0.001,-0.74687 -0.75099,0.03792 c -0.79623,0.04021 -4.5176,-0.15284 -4.76322,-0.247094 -0.18636,-0.07151 -0.37936,-0.782706 -0.29914,-1.10232 l 0.0617,-0.2457604 2.87583,0.07305 2.87584,0.07305 v -0.296004 c 0,-0.162803 -0.0287,-0.57074 -0.0638,-0.906527 l -0.0638,-0.610522 h -1.27163 c -0.6994,0 -2.17919,-0.0478 -3.28842,-0.106221 -2.20452,-0.11611 -2.37952,-0.16457 -2.61309,-0.723585 -0.17328,-0.414707 -0.0626,-1.881207 0.15861,-2.102461 0.10972,-0.109719 0.44797,-0.164071 1.23793,-0.198924 1.45106,-0.06402 7.05478,-0.217929 7.49343,-0.20581 l 0.34764,0.0096 0.0257,5.175302 0.0257,5.1753014 -0.67132,0.0634 c -1.00968,0.09536 -1.08957,0.08603 -1.14707,-0.133837 z m -0.16987,-8.0796834 v -0.630287 l -1.2664,-0.06459 c -0.69652,-0.03552 -1.69899,-0.06477 -2.22772,-0.06499 -1.10967,-4.65e-4 -1.2735,0.08841 -1.2735,0.690915 0,0.358672 0.0201,0.383176 0.37247,0.453643 0.41613,0.08322 2.32295,0.205797 3.57572,0.229856 l 0.81943,0.01574 z"
        id="path1"
        sodipodi:nodetypes="sccscsscscssssscccccscccsssccccscccccssssscsccscscccscssscssccsccccccccsssccsscssscccscsssssssscsssscssssssccssssssssssssssssssssssssssssssssssssssssssssssssssssssssssscssssssscssccsssssssssssssssssssssscssssssssccssccsscsssssssssssscccsssccsssssssssssssssssscssscccccccsccsscccccscccccccscccccsccccccsccsccccssssssssssscsccsssscsccccccccsssscccscssscssccsss" /></g></svg>
diff --git a/core/frontend/src/components/wifi/WifiTrayMenu.vue b/core/frontend/src/components/wifi/WifiTrayMenu.vue
index 823214d995..093c7d79f5 100644
--- a/core/frontend/src/components/wifi/WifiTrayMenu.vue
+++ b/core/frontend/src/components/wifi/WifiTrayMenu.vue
@@ -85,7 +85,7 @@ export default Vue.extend({
   },
   mounted() {
     commander.getEnvironmentVariables().then((environment_variables) => {
-      this.disabled_services = ((environment_variables?.BLUEOS_DISABLE_SERVICES as string) ?? '').split(',') as string[]
+      this.disabled_services = (environment_variables?.BLUEOS_DISABLE_SERVICES as string ?? '').split(',') as string[]
     })
   },
 })
diff --git a/core/frontend/src/widgets/Networking.vue b/core/frontend/src/widgets/Networking.vue
index 7c91364a73..8852bdd4e2 100644
--- a/core/frontend/src/widgets/Networking.vue
+++ b/core/frontend/src/widgets/Networking.vue
@@ -2,7 +2,8 @@
   <v-card class="d-flex align-center justify-center" height="40">
     <v-card-title class="d-flex align-center">
       <span class="vertical-text mr-1">eth0</span>
-      <img src="/img/icons/pi.svg" alt="Pi" class="pi-icon mr-1" height="30">
+      <!-- eslint-disable vue/no-v-html -->
+      <i class="pi-icon mr-1" v-html="image" />
       <div class="d-flex flex-column">
         <div class="d-flex align-center text-caption" style="margin-bottom: -5px">
           <v-icon small>
@@ -22,11 +23,12 @@
 </template>
 
 <script lang="ts">
+import axios from 'axios'
 import Vue from 'vue'
 
 import { OneMoreTime } from '@/one-more-time'
 import system_information, { FetchType } from '@/store/system-information'
-import { formatBandwidth } from '@/utils/networking';
+import { formatBandwidth } from '@/utils/networking'
 
 export default Vue.extend({
   name: 'ETh0Widget',
@@ -34,6 +36,7 @@ export default Vue.extend({
     return {
       timer: 0,
       check_backend_status_task: new OneMoreTime({ delay: 2000, disposeWith: this }),
+      image: '',
     }
   },
   computed: {
@@ -46,10 +49,11 @@ export default Vue.extend({
       return eth0?.download_speed ?? 0
     },
   },
-  mounted() {
+  async mounted() {
     this.check_backend_status_task.setAction(() => {
       system_information.fetchSystemInformation(FetchType.SystemNetworkType)
     })
+    this.loadImage()
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -58,6 +62,11 @@ export default Vue.extend({
     formatBandwidth(bytesPerSecond: number): string {
       return formatBandwidth(bytesPerSecond)
     },
+    async loadImage() {
+      const url = (await import('@/assets/img/icons/pi.svg')).default as string
+      const response = await axios.get(url)
+      this.image = response.data
+    },
   },
 })
 </script>
@@ -71,4 +80,9 @@ export default Vue.extend({
   width: 20px;
   margin-left: -18px;
 }
+
+.pi-icon :deep(svg) {
+  width: 35px;
+  margin-bottom: -10px;
+}
 </style>
diff --git a/core/frontend/src/widgets/WifiNetworking.vue b/core/frontend/src/widgets/WifiNetworking.vue
index a377201a5a..7adde2bdf3 100644
--- a/core/frontend/src/widgets/WifiNetworking.vue
+++ b/core/frontend/src/widgets/WifiNetworking.vue
@@ -2,7 +2,8 @@
   <v-card class="d-flex align-center justify-center" height="40">
     <v-card-title class="d-flex align-center">
       <span class="vertical-text mr-1">Wifi</span>
-      <img src="/img/icons/pi.svg" alt="Pi" class="pi-icon mr-1" height="30">
+      <!-- eslint-disable vue/no-v-html -->
+      <i class="pi-icon mr-1" v-html="image" />
       <div class="d-flex flex-column">
         <div class="d-flex align-center text-caption" style="margin-bottom: -5px">
           <v-icon small>
@@ -22,6 +23,7 @@
 </template>
 
 <script lang="ts">
+import axios from 'axios'
 import Vue from 'vue'
 
 import { OneMoreTime } from '@/one-more-time'
@@ -34,6 +36,7 @@ export default Vue.extend({
     return {
       timer: 0,
       check_backend_status_task: new OneMoreTime({ delay: 2000, disposeWith: this }),
+      image: '',
     }
   },
   computed: {
@@ -46,10 +49,11 @@ export default Vue.extend({
       return eth0?.download_speed ?? 0
     },
   },
-  mounted() {
+  async mounted() {
     this.check_backend_status_task.setAction(() => {
       system_information.fetchSystemInformation(FetchType.SystemNetworkType)
     })
+    this.loadImage()
   },
   beforeDestroy() {
     clearInterval(this.timer)
@@ -58,6 +62,11 @@ export default Vue.extend({
     formatBandwidth(bytesPerSecond: number): string {
       return formatBandwidth(bytesPerSecond)
     },
+    async loadImage() {
+      const url = (await import('@/assets/img/icons/pi.svg')).default as string
+      const response = await axios.get(url)
+      this.image = response.data
+    },
   },
 })
 </script>
@@ -71,4 +80,9 @@ export default Vue.extend({
   width: 20px;
   margin-left: -18px;
 }
+
+.pi-icon :deep(svg) {
+  width: 35px;
+  margin-bottom: -10px;
+}
 </style>