Change widget error header icon to SVG

internal/glance/static/main.css

@@ -723,6 +723,7 @@ details[open] .summary::after {
     justify-content: space-between;
     position: relative;
     margin-bottom: 1.8rem;
+    z-index: 1;
 }
 
 .widget-error-header::before {
@@ -738,19 +739,11 @@ details[open] .summary::after {
 .widget-error-icon {
     width: 2.4rem;
     height: 2.4rem;
-    border: 0.2rem solid var(--color-negative);
-    border-radius: 50%;
-    text-align: center;
-    line-height: 2rem;
     flex-shrink: 0;
+    stroke: var(--color-negative);
     opacity: 0.6;
 }
 
-.widget-error-icon::before {
-    content: '!';
-    color: var(--color-text-highlight);
-}
-
 .widget-content {
     container-type: inline-size;
     container-name: widget;

internal/glance/templates/widget-base.html

@@ -15,7 +15,9 @@
         {{ else }}
             <div class="widget-error-header">
                 <div class="color-negative size-h3">ERROR</div>
-                <div class="widget-error-icon"></div>
+                <svg class="widget-error-icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5">
+                    <path stroke-linecap="round" stroke-linejoin="round" d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126ZM12 15.75h.007v.008H12v-.008Z" />
+                </svg>
             </div>
             <p class="break-all">{{ if .Error }}{{ .Error }}{{ else }}No error information provided{{ end }}</p>
         {{ end}}