working use cases now: a switch which flips and colors the svg to show on /...

working use cases now: a switch which flips and colors the svg to show on / off, a selector which allows to set a font, icons that show when hovered, with an extra disabled icon.

src/css/style.css

-svg {
+i:has(svg) {
   margin: 1rem;
+}
+
+i:has(svg):not(.disabled) {
   fill: black;
 }
 
-svg:hover {
+i:has(svg):not(.disabled):hover {
   fill: olivedrab;
+  cursor: pointer;
 }
 
-.i {
+i:has(svg).disabled  {
   fill: gray;
 }
 
-.i:hover {
-  fill: red;
+i:has(svg).disabled:hover {
+  cursor: not-allowed;
 }
 
 input[type="checkbox"] + label {

src/ts/page.ts

@@ -15,8 +15,11 @@ export const Content = `
   </form>
   
   <div><div><div><div>
-  <i class="i">` + i.overview_icon + `</i>
-  <i>` + i.overview_icon + i.overview_icon + i.overview_icon + `</i>
+  <i class="disabled">` + i.overview_icon + `</i>
+  <i>` + i.overview_icon + `</i>
+  <i>` + i.overview_icon + `</i>
+  <i>` + i.overview_icon + `</i>
+  <i>` + i.overview_icon + `</i>
   </div></div></div></div>
 
 `