fix(icons): Use .png over .svg for icons for firefox

index.html

@@ -192,7 +192,7 @@ <h3><img alt="CONIX Logo" class="title-logo" src="static/images/xr-logo-v7.png"/
 </div>
 
 <div class="error-icon" id="error-icon">
-    <img id="error-svg" src="/src/health/images/exclamation.svg">
+    <img id="error-svg" src="/src/health/images/exclamation-error.png">
     <div id="error-block" class="error-block"></div>
 </div>
 <span class="echo-name" id="echo-name"></span>

src/components/arena-user.js

@@ -232,13 +232,13 @@ AFRAME.registerComponent('arena-user', {
 
     getQualityIcon(quality) {
         if (quality > 66.7) {
-            return 'url(/src/icons/images/signal-good.svg)';
+            return 'url(/src/icons/images/signal-good.png)';
         } else if (quality > 33.3) {
-            return 'url(/src/icons/images/signal-poor.svg)';
+            return 'url(/src/icons/images/signal-poor.png)';
         } else if (quality > 0) {
-            return 'url(/src/icons/images/signal-weak.svg)';
+            return 'url(/src/icons/images/signal-weak.png)';
         } else {
-            return 'url(/src/icons/images/signal-bad.svg)';
+            return 'url(/src/icons/images/signal-bad.png)';
         }
     },
 

src/health/index.js

@@ -60,10 +60,10 @@ export class ARENAHealth {
         const icon = document.getElementById('error-icon');
         if (icon) icon.style.display = 'block';
         // set error viewing level
-        let imgSrc = '/src/health/images/exclamation-warn.svg';
+        let imgSrc = '/src/health/images/exclamation-warn.png';
         for (const [k, v] of Object.entries(this.activeErrors)) {
             if (v.class == 'health-error-label') {
-                imgSrc = '/src/health/images/exclamation.svg';
+                imgSrc = '/src/health/images/exclamation-error.png';
             }
         };
         $('#error-svg').attr('src', imgSrc);