Ook lesiconen overgezet op het lettertype i.p.v. SVG-iconen

Author: klascal

index.html

@@ -5,7 +5,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <link
       rel="stylesheet"
-      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_back,arrow_back_ios_new,arrow_forward_ios,bar_chart,check,close,delete,error,event,link,menu,more_horiz,notification_multiple,palette,qr_code_scanner,settings"
+      href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&icon_names=arrow_back,arrow_back_ios_new,arrow_forward_ios,bar_chart,block,check,close,delete,error,event,info,link,menu,more_horiz,notification_multiple,palette,qr_code_scanner,settings"
     />
     <link rel="stylesheet" href="dialog-polyfill.min.css" />
     <link rel="stylesheet" href="material.css" />

schedule.js

@@ -599,7 +599,7 @@ async function fetchSchedule(year, week, isFirstLoad) {
             : "";
           if (!a.cancelled && (a.schedulerRemark || a.content)) {
             warningSymbol = warning
-              ? `<svg width="24" height="24" fill="none" viewBox="0 -960 960 960" xmlns="http://www.w3.org/2000/svg" id="icon" data-tooltip="${warning}"><path d="M480-280q17 0 28.5-11.5T520-320v-160q0-17-11.5-28.5T480-520q-17 0-28.5 11.5T440-480v160q0 17 11.5 28.5T480-280Zm0-320q17 0 28.5-11.5T520-640q0-17-11.5-28.5T480-680q-17 0-28.5 11.5T440-640q0 17 11.5 28.5T480-600Zm0 520q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q134 0 227-93t93-227q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93Zm0-320Z"/></svg>`
+              ? `<span id="icon" data-tooltip="${warning}">info</span>`
               : "";
           }
           if (
@@ -614,7 +614,7 @@ async function fetchSchedule(year, week, isFirstLoad) {
             cancelled = "notEnrolled";
             warning = "Afgemeld";
             warningSymbol = warning
-              ? `<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" id="icon" data-tooltip="${warning}"><path d="M480-80q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480q0 83-31.5 156T763-197q-54 54-127 85.5T480-80Zm0-80q54 0 104-17.5t92-50.5L228-676q-33 42-50.5 92T160-480q0 134 93 227t227 93Zm252-124q33-42 50.5-92T800-480q0-134-93-227t-227-93q-54 0-104 17.5T284-732l448 448Z"/></svg>`
+              ? `<span id="icon" data-tooltip="${warning}">block</span>`
               : "";
           } else if (a.cancelled == true) {
             cancelled = "cancelled";
@@ -747,8 +747,8 @@ async function fetchSchedule(year, week, isFirstLoad) {
     tip.textContent = btn.getAttribute("data-tooltip");
     const rect = btn.getBoundingClientRect();
     const tipRect = tip.getBoundingClientRect();
-    let top = rect.bottom + 10;
-    let left = rect.right - tipRect.width + 4; // rect.left + (rect.width - tipRect.width) / 2 for center
+    let top = rect.bottom + 8;
+    let left = rect.right - tipRect.width + 5; // rect.left + (rect.width - tipRect.width) / 2 for center
     if (top + tipRect.height > window.innerHeight)
       top = rect.top - tipRect.height - 8;
     if (left < 0) left = 8;

style.css

@@ -261,7 +261,7 @@ section #submenu:last-of-type,
 }
 .warning {
   position: absolute;
-  bottom: 6px;
+  bottom: 0;
   right: 6px;
 }
 th {
@@ -644,6 +644,8 @@ button:not(:disabled) {
 .icon {
   vertical-align: middle;
   color: black;
+  font-family: Material Symbols Rounded;
+  font-size: 24px;
 }
 
 .selected {
@@ -878,6 +880,8 @@ input[type="radio"]:not(:checked) ~ label {
   }
   #warningIcon {
     fill: #e89822;
+    position: relative;
+    bottom: 4px;
   }
   #authorizationCode:invalid {
     background-color: #ff2f2f73;
@@ -922,7 +926,7 @@ button:disabled {
   color: var(--accent-text);
 }
 .notEnrolled #icon {
-  fill: var(--accent-text);
+  color: var(--accent-text);
 }
 .timeline {
   position: absolute;
@@ -1066,9 +1070,6 @@ label {
   .weekEnabled .timeline {
     top: calc(var(--top) * 1.2 + 2rem);
   }
-  .weekEnabled .warning {
-    bottom: 4px;
-  }
 }
 @media (max-width: 810px) {
   .weekEnabled .longExtra {