Dropdown - now arrow flips;

lib/ui/elements/dropdown.mjs

@@ -70,7 +70,7 @@ export default (params) => {
       class="dropdown">
       <div class="head" onclick=${params.headerOnClick}>
         <span>${headerSpan}</span>
-        <div class="icon"></div>
+        <span class="material-symbols-outlined"/>
       </div>
       ${params.ul}`;
 

public/css/elements/_dropdown.css

@@ -2,7 +2,7 @@
   width: 100%;
   overflow: visible;
   position: relative;
-  background-color: white;
+  background-color: var(--color-light);
   box-shadow: var(--color-mid) 0px 8px 24px;
 
   &:disabled {
@@ -22,11 +22,15 @@
       text-overflow: ellipsis;
     }
 
-    & > .icon {
+    > .material-symbols-outlined {
       pointer-events: none;
       margin-left: auto;
       width: 1.5em;
-      content: url('../../icons/icon-drop-down.svg');
+
+      &:after {
+        color: var(--color-primary);
+        content: 'arrow_drop_down';
+      }
     }
   }
 
@@ -40,7 +44,7 @@
     box-shadow: 1px 1px 3px var(--color-primary-light);
     margin-top: -1px;
     text-align: left;
-    background-color: white;
+    background-color: var(--color-light);
     z-index: 997;
 
     & > li {
@@ -67,11 +71,13 @@
     }
   }
 
-  &.active > ul {
-    display: block;
+  &.active {
+    & > ul {
+      display: block;
+    }
 
-    & > .head > .icon {
-      content: url('../../icons/icon-drop-up.svg');
+    & > .head > .material-symbols-outlined:after {
+      content: 'arrow_drop_up';
     }
   }
 
@@ -84,7 +90,7 @@
   .dropdown {
     box-shadow: none;
 
-    & > .head > .icon {
+    & > .head > .material-symbols-outlined {
       display: none;
     }
   }
@@ -97,14 +103,22 @@ html.dark-mode {
     &.active .head {
       background: var(--dm-color-on);
     }
-    ul .label {
-      background-color: var(--dm-color-dark-faded);
+
+    ul {
+      &.label {
+        background-color: var(--dm-color-dark-faded);
+      }
     }
+
     ul > li,
     .head {
       background: var(--dm-color-medium);
       color: var(--dm-color-light);
       border-color: var(--dm-color-dark-faded);
+
+      > .material-symbols-outlined:after {
+        color: var(--color-light);
+      }
     }
 
     ul > li {

public/css/ui.css

@@ -1444,7 +1444,7 @@ html.dark-mode {
   width: 100%;
   overflow: visible;
   position: relative;
-  background-color: white;
+  background-color: var(--color-light);
   box-shadow: var(--color-mid) 0px 8px 24px;
   &:disabled {
     pointer-events: none;
@@ -1460,11 +1460,14 @@ html.dark-mode {
       white-space: nowrap;
       text-overflow: ellipsis;
     }
-    & > .icon {
+    > .material-symbols-outlined {
       pointer-events: none;
       margin-left: auto;
       width: 1.5em;
-      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 10l5 5 5-5z"/>%0A</svg>');
+      &:after {
+        color: var(--color-primary);
+        content: "arrow_drop_down";
+      }
     }
   }
   & > ul {
@@ -1477,7 +1480,7 @@ html.dark-mode {
     box-shadow: 1px 1px 3px var(--color-primary-light);
     margin-top: -1px;
     text-align: left;
-    background-color: white;
+    background-color: var(--color-light);
     z-index: 997;
     & > li {
       padding: 5px;
@@ -1499,10 +1502,12 @@ html.dark-mode {
       background-color: var(--color-primary);
     }
   }
-  &.active > ul {
-    display: block;
-    & > .head > .icon {
-      content: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">%0A<path d="M7 14l5-5 5 5z"/>%0A</svg>');
+  &.active {
+    & > ul {
+      display: block;
+    }
+    & > .head > .material-symbols-outlined:after {
+      content: "arrow_drop_up";
     }
   }
   &.dropdown-reverse > ul {
@@ -1512,7 +1517,7 @@ html.dark-mode {
 @media print {
   .dropdown {
     box-shadow: none;
-    & > .head > .icon {
+    & > .head > .material-symbols-outlined {
       display: none;
     }
   }
@@ -1523,14 +1528,19 @@ html.dark-mode {
     &.active .head {
       background: var(--dm-color-on);
     }
-    ul .label {
-      background-color: var(--dm-color-dark-faded);
+    ul {
+      &.label {
+        background-color: var(--dm-color-dark-faded);
+      }
     }
     ul > li,
     .head {
       background: var(--dm-color-medium);
       color: var(--dm-color-light);
       border-color: var(--dm-color-dark-faded);
+      > .material-symbols-outlined:after {
+        color: var(--color-light);
+      }
     }
     ul > li {
       &:hover {