switch to svg icons

assets/css/style.css

@@ -13,9 +13,7 @@
   --gcg-color-border: #dee2e6;
   --gcg-font-primary: "Ubuntu", sans-serif;
   --gcg-font-header: "Fira Sans", sans-serif;
-  --gcg-font-icon: "Material Design Icons";
+  --gcg-icon-list: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-right-circle" class="hi-svg-inline" fill="rgb(255,188,59)" width="1em" height="1em" viewBox="0 0 24 24"><path d="M22,12A10,10 0 0,1 12,22A10,10 0 0,1 2,12A10,10 0 0,1 12,2A10,10 0 0,1 22,12M10,18L16,12L10,6L8.6,7.4L13.2,12L8.6,16.6L10,18Z" /></svg>');
-  --gcg-icon-list: "\f0B2A";
-  --gcg-icon-search: "\f0349";
 }
 
 /*  typography */
@@ -298,7 +296,6 @@ textarea.form-control {
 .content ul li::before {
   position: absolute;
   content: var(--gcg-icon-list);
-  font-family: var(--gcg-font-icon);
   font-size: 14px;
   left: 0;
   top: 1px;
@@ -396,6 +393,7 @@ details[open] summary {
 }
 
 .fb-tile-icon {
+  display: flex;
   font-size: 96px;
 }
 
@@ -550,11 +548,9 @@ details[open] summary {
   background: var(--gcg-color-primary);
   color: white;
   font-size: 25px;
-  text-align: center;
+  display: flex;
-}
+  align-items: center;
-
+  justify-content: center;
-.play-btn i {
-  line-height: 80px;
 }
 
 .play-btn::before {
@@ -657,16 +653,6 @@ details[open] summary {
   font-weight: 600;
 }
 
-.nav-item .nav-link.nav-search::before {
-  position: relative;
-  content: var(--gcg-icon-search);
-  font-family: var(--gcg-font-icon);
-  font-size: 14px;
-  left: 0;
-  top: 1px;
-  transition: 0.3s ease;
-}
-
 .nav-item::before {
   position: absolute;
   left: 0;
@@ -1066,3 +1052,8 @@ link:focus,
     font-size: 1.5em;
   }
 }
+
+.hi-svg-inline {
+  vertical-align: -0.125rem;
+}
+

assets/js/script.js

@@ -34,13 +34,6 @@
   // sticky menu
   $(window).scroll(adaptHeight);
 
-  // background image
-  $('[data-background]').each(function () {
-    $(this).css({
-      'background-image': 'url(' + $(this).data('background') + ')'
-    });
-  });
-
   // hero slider
   $('.hero-slider').slick({
     autoplay: true,
@@ -49,8 +42,8 @@
     pauseOnHover: true,
     infinite: true,
     arrows: true,
-    prevArrow: '<button type=\'button\' class=\'prevArrow\'><i class=\'mdi mdi-chevron-left arrowIcon\'></i></button>',
+    prevArrow: '<button type=\'button\' class=\'prevArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path d="M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z" /></svg></button>',
-    nextArrow: '<button type=\'button\' class=\'nextArrow\'><i class=\'mdi mdi-chevron-right arrowIcon\'></i></button>',
+    nextArrow: '<button type=\'button\' class=\'nextArrow\'><svg xmlns="http://www.w3.org/2000/svg" id="mdi-chevron-left" class="arrowIcon" viewBox="0 0 24 24" height="1em" width="1em" fill="currentColor"><path xmlns="http://www.w3.org/2000/svg" d="M8.59,16.58L13.17,12L8.59,7.41L10,6L16,12L10,18L8.59,16.58Z"/></svg></button>',
     dots: true
   });
 

config.yml

@@ -20,7 +20,7 @@ params:
   address: Georg-Cantor-Gymnasium <br> Torstraße 13 <br> 06110 Halle (Saale)
   top_header: true
   email: schulleitung@cantor-gymnasium.de
-  email_label: schulleitung<i class='mdi mdi-at'></i>cantor-gymnasium.de
+  email_label: schulleitung(at)cantor-gymnasium.de
   description: Das Georg-Cantor-Gymnasium - eine
     mathematisch-naturwissenschaftliche Spezialschule in Halle (Saale).
   images:
@@ -34,7 +34,6 @@ params:
       - https://assets.cantorgymnasium.de/bootstrap/v5/css/bootstrap.min.css
       - https://assets.cantorgymnasium.de/slick/v1.8/slick.css
       - https://assets.cantorgymnasium.de/venobox/v2/dist/venobox.min.css
-      - https://assets.cantorgymnasium.de/fonts/mdi/v7/css/materialdesignicons.min.css
       - https://assets.cantorgymnasium.de/fonts/fira/fira.css
       - https://assets.cantorgymnasium.de/fonts/ubuntu/ubuntu.css
     js:
@@ -47,16 +46,16 @@ params:
       - https://assets.cantorgymnasium.de/filterizr/v2/dist/vanilla.filterizr.min.js
   social:
     - title: YouTube
-      icon: mdi mdi-youtube
+      icon: youtube
       link: https://www.youtube.com/@cantornews
     - title: Twitter
-      icon: mdi mdi-twitter
+      icon: twitter
       link: https://twitter.com/cantor_news
     - title: Instagram
-      icon: mdi mdi-instagram
+      icon: instagram
       link: https://instagram.com/cantor.news
     - title: Facebook
-      icon: mdi mdi-facebook
+      icon: facebook
       link: https://facebook.com/cantor.news
   preloader:
     enable: true
@@ -274,3 +273,6 @@ privacy:
     privacyEnhanced: true
   vimeo:
     enableDNT: true
+module:
+  imports:
+  - path: github.com/hugomods/icons/vendors/mdi

content/projektwoche/2023.md

@@ -12,7 +12,7 @@ type: projektwoche
 tiles:
   - title: Unser "Cantor" aus Sicht der Schulchronisten
     bg_color: "#990000"
-    icon: mdi mdi-pillar
+    icon: pillar
     font_color: white
     content: >
       Lust auf „Zurück in die Zukunft“? Was soll denn das nun heißen? In diesem
@@ -34,7 +34,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p01" >}}
   - title: Georg Cantor zwischen Genie und Wahnsinn
     bg_color: "#e4fdfd"
-    icon: mdi mdi-head-cog-outline
+    icon: head-cog-outline
     font_color: black
     content: >+
       Wir haben uns in der Projektwoche mit Cantors psychischen Erkrankungen
@@ -57,7 +57,7 @@ tiles:
 
   - title: Keramikreliefs und anderes aus dem Brennofen
     bg_color: "#cc9966"
-    icon: mdi mdi-fireplace
+    icon: fireplace
     font_color: black
     content: >
       Wir ergänzen die fehlenden Reliefs im Schulhaus und stellen Dinge her, die
@@ -66,14 +66,14 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p03" >}}
   - title: Unendlichkeiten der Zeit
     bg_color: "#6666ff"
-    icon: mdi mdi-printer-3d
+    icon: printer-3d
     font_color: white
     content: >
       Wir nutzten den 3-D-Drucker, um Uhren und weitere Merchandising-Artikel zu
       gestalten und zu produzieren.
   - title: Unendlichkeit in der Literatur
     bg_color: "#ccffcc"
-    icon: mdi mdi-bookshelf
+    icon: bookshelf
     font_color: black
     content: >+
       Unser Projekt handelt vom Schreiben einer „unendlichen Geschichte“.
@@ -115,7 +115,7 @@ tiles:
 
   - title: Unendlich viele Affen schreiben Shakespeare
     bg_color: "#ff9933"
-    icon: mdi mdi-fountain-pen-tip
+    icon: fountain-pen-tip
     font_color: black
     content: >+
       Es ist ein gleichermaßen bekanntes wie bizarres Gedankenexperiment:
@@ -143,7 +143,7 @@ tiles:
 
   - title: Berühmte Zeitgenossen Cantors in Halle
     bg_color: "#336699"
-    icon: mdi mdi-account-question-outline
+    icon: account-question-outline
     font_color: white
     content: >
       Zehn Schülerinnen und Schüler haben in vier Gruppen gearbeitet und
@@ -162,7 +162,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p07" >}}
   - title: Wir basteln eigene Brettspiele zu Cantor und zum GCG
     bg_color: "#cc3333"
-    icon: mdi mdi-checkerboard
+    icon: checkerboard
     font_color: white
     content: >
       Im Projekt „Wir basteln eigene Brettspiele zu Cantor und dem GCG“ hatten
@@ -183,7 +183,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p09" >}}
   - title: Ein Cantor-Team-Duell
     bg_color: "#99cc99"
-    icon: mdi mdi-fencing
+    icon: fencing
     font_color: black
     content: >
       Bei diesem Projekt konnten die Schülerinnen und Schüler ihrer ganzen
@@ -204,7 +204,7 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p10" >}}
   - title: Cantor-School-Rap
     bg_color: "#ffcccc"
-    icon: mdi mdi-microphone-variant
+    icon: microphone-variant
     font_color: black
     content: >
       Unser Cantor-School-Rap entstand mit Beteiligung der Klassen 5, 6, 8 und
@@ -229,13 +229,13 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p11" >}}
   - title: Chor und Schulband
     bg_color: "#ffcc00"
-    icon: mdi mdi-music-clef-treble
+    icon: music-clef-treble
     font_color: black
     content: |
       {{< gallery dir="/media/projektwoche/2023/p12" >}}
   - title: Farben zu Cantors Zeiten
     bg_color: "#ccccff"
-    icon: mdi mdi-test-tube
+    icon: test-tube
     font_color: black
     content: >
       Die Projektgruppe „Farben zu Cantors Zeiten“, geleitet von Frau
@@ -254,14 +254,14 @@ tiles:
       {{< gallery dir="/media/projektwoche/2023/p13" >}}
   - title: Die Stadt Halle zu Cantors Zeiten
     bg_color: "#009999"
-    icon: mdi mdi-bank-outline
+    icon: bank-outline
     font_color: white
     content: >
       <iframe src="/media/projektwoche/2023/p14/Medizin_Cantor.pdf" width="100%"
       height="600vh"></iframe>
   - title: Wir fotografieren die Unendlichkeit
     bg_color: "#ccff66"
-    icon: mdi mdi-camera-outline
+    icon: camera-outline
     font_color: black
     content: >+
       Kann man die Unendlichkeit fotografieren? Sicher nicht. Wie soll das
@@ -286,7 +286,7 @@ tiles:
 
   - title: Philosophie und Unendlichkeit
     bg_color: "#cc6600"
-    icon: mdi mdi-all-inclusive-box-outline
+    icon: all-inclusive-box-outline
     font_color: white
     content: >+
       In der Projektgruppe "Philosophie und Unendlichkeit" haben sich
@@ -309,13 +309,13 @@ tiles:
 
   - title: Das unendlich Große/Kleine in den Naturwissenschaften
     bg_color: "#cc0066"
-    icon: mdi mdi-bacteria-outline
+    icon: bacteria-outline
     font_color: white
     content: |
       {{< gallery dir="/media/projektwoche/2023/p17" >}}
   - title: Bau einer Rube-Goldberg-Maschine
     bg_color: "#996699"
-    icon: mdi mdi-state-machine
+    icon: state-machine
     font_color: white
     content: >+
       In unserem Projekt ging es darum, eine Maschine zu bauen, die man im
@@ -338,19 +338,19 @@ tiles:
 
   - title: Kleine Ursache - großer Effekt
     bg_color: "#3333cc"
-    icon: mdi mdi-magnet-on
+    icon: magnet-on
     font_color: white
     content: |
       {{< gallery dir="/media/projektwoche/2023/p19" >}}
   - title: Science meets Literature
     bg_color: "#ffff00"
-    icon: mdi mdi-book-search-outline
+    icon: book-search-outline
     font_color: black
     content: |
       {{< gallery dir="/media/projektwoche/2023/p20" >}}
   - title: Cantor - Wer kann ihm entkommen?
     bg_color: "#9966ff"
-    icon: mdi mdi-map-legend
+    icon: map-legend
     font_color: white
     content: |
       {{< gallery dir="/media/projektwoche/2023/p21" >}}

content/superhaufen/20-jahriges-jubilaum.md

@@ -26,7 +26,7 @@ tiles:
 
 
     title: Programm
-    icon: mdi mdi-text
+    icon: text
     bg_color: "#44bda7"
     font_color: "#ffffff"
 ---

content/superhaufen/30-jahriges-jubilaum.md

@@ -10,7 +10,7 @@ tiles:
   - title: Festveranstaltung
     bg_color: "#ffef00"
     font_color: "#ffffff"
-    icon: mdi mdi-crowd
+    icon: crowd
     content: |+
 
 
@@ -135,7 +135,7 @@ tiles:
           {{< gallery dir="/media/schulchronik/2018/festveranstaltung" >}}
   - title: Aktionen
     bg_color: "#0fe008"
-    icon: mdi mdi-theater
+    icon: theater
     content: >
       Den Freitag, den zweiten Tag der Festtage zum 30. Jubiläum, verbrachten
       Schülerinnen und Schüler mit unterschiedlichen Aktionen, wie zum Beispiel
@@ -292,7 +292,7 @@ tiles:
           {{< gallery dir="/media/schulchronik/2018/rallye" >}}
   - title: Flashmob
     bg_color: "#0051e5"
-    icon: mdi mdi-all-inclusive
+    icon: all-inclusive
     content: >
       Unser geliebtes Gymnasium feierte im Jahr 2018 sein 30-jähriges Jubiläum.
 

content/superhaufen/35-jahriges-jubilaum.md

@@ -9,7 +9,7 @@ previous:
 tiles:
   - title: Aktionen
     bg_color: "#f85d1f"
-    icon: mdi mdi-file-document-outline
+    icon: file-document-outline
     font_color: "#ffffff"
     content: "\ \n"
     unterhaufen:
@@ -32,12 +32,12 @@ tiles:
 
   - title: Festveranstaltung
     bg_color: "#2a1dc8"
-    icon: mdi mdi-party-popper
+    icon: party-popper
     font_color: "#fff9f9"
     content: "\ \n"
   - title: Flashmob
     bg_color: "#49e649"
-    icon: mdi mdi-crowd
+    icon: crowd
     font_color: "#fff5f5"
     content: "\ \n"
 ---

data/homepage.yml

@@ -5,7 +5,7 @@ top_banner:
     statt.  <br>**Weihnachtssingen** am 20.12.2023, 11 Uhr
   color: "#19aa96"
   font_color: "#ffffff"
-  icon: mdi mdi-gift-open
+  icon: gift-open
   temporarily:
     enable: true
     start_date: 2023-11-05T14:47:53.000+01:00
@@ -158,7 +158,7 @@ success_banner:
       image: media/home/cds.webp
     - type: icon
       name: Und viel mehr ...
-      icon: mdi mdi-trophy-outline
+      icon: trophy-outline
       content: >
         Durch umfassende Begabtenförderungsangebote sind unsere Schüler bei
         vielen Wettbewerben erfolgreich. Diese umfassen erweiterte Stoffgebiete,

go.mod

@@ -0,0 +1,5 @@
+module git.cantorgymnasium.de/gcg/gcg-website
+
+go 1.19
+
+require github.com/hugomods/icons/vendors/mdi v0.3.2 // indirect

go.sum

@@ -0,0 +1,4 @@
+github.com/hugomods/icons v0.6.0 h1:G6RU93okhPPRDh/jqcew9gwkcYpSpg0rCBv4S6yUAFw=
+github.com/hugomods/icons v0.6.0/go.mod h1:cIkSvK6W0q6N4U6n9KGz+QfRWQXAW0INd+1P31gPNGg=
+github.com/hugomods/icons/vendors/mdi v0.3.2 h1:59KlTgBNiKGlPXzaQ6zn+VLYstFb4zABKwlHfzL8ADY=
+github.com/hugomods/icons/vendors/mdi v0.3.2/go.mod h1:yHIDYxNoBV8RCAc4Uordp6rr4GObPrtBAimShBBFdmc=

layouts/author/single.html

@@ -14,7 +14,7 @@
 		  {{ .Content }}
 		  <hr>
 		  {{ with .Params.email }}
-		      <a href="mailto:{{ . }}"><i class="mdi mdi-at"></i></a>
+		      <a href="mailto:{{ . }}">{{ partial "icons/icon" (dict "vendor" "mdi" "name" "at") }}</a>
 		  {{ end }}
 		</div>
   </div>

layouts/ganztagsangebote/single.html

@@ -6,10 +6,10 @@
     <img src="{{ .Params.image | relURL }}" class="img-fluid w-100 mb-4">
     <h2 class="mb-4">{{ .Title }}</h2>
     <div class="row mb-4">
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-calendar-today-outline" "title" "Zeit" "content" .Params.schedule) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "calendar-today-outline" "title" "Zeit" "content" .Params.schedule) }}
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-timer-sand" "title" "Dauer" "content" .Params.duration) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "timer-sand" "title" "Dauer" "content" .Params.duration) }}
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-crowd" "title" "Klassen" "content" .Params.class) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "crowd" "title" "Klassen" "content" .Params.class) }}
-      {{ partial "icon-element" (dict "size" 3 "icon" "mdi-map-marker-radius-outline" "title" "Raum" "content" .Params.room) }}
+      {{ partial "icon-element" (dict "size" 3 "icon" "map-marker-radius-outline" "title" "Raum" "content" .Params.room) }}
     </div>
     <hr class="mb-4">
     <div class="content text-justify">

layouts/index.html

@@ -6,7 +6,7 @@
 
 {{ if $data.homepage.slider.enable }}
 {{ with $data.homepage.slider }}
-<section class="hero-section overlay bg-cover hero-default" data-background="{{ .bg_image | absURL }}">
+<section class="hero-section overlay bg-cover hero-default" style="background-image: url('{{ .bg_image | absURL }}');">
   <div class="container">
     <div class="row">
       <div class="col-md-12">
@@ -117,12 +117,12 @@
       <div class="col-lg-4 col-sm-6 mb-4 mb-lg-0 d-flex align-items-stretch">
         <div class="card border-info rounded-0 hover-shadow mb-2">
           <span class="position-absolute top-0 start-0 ms-5 translate-middle p-2 text-bg-info border border-info rounded-pill">
-            <i class="mdi mdi-pin me-2">Angeheftet</i>
+            {{ partial "mdi" "pin" }} Angeheftet
           </span>        
           <img class="card-img-top rounded-0" src="{{ .image | relURL }}" alt="{{ .title }}" onclick="$('#{{ md5 .title }}').modal('show');">
           <div class="card-body d-flex flex-column">
             <span class="text-truncate mb-2">
-              <i class="mdi mdi-fountain-pen-tip me-2"></i>
+              {{ partial "mdi" "fountain-pen-tip" }}
               {{ partial "authors" (dict "Site" $.Site "author" .author )}}
             </span>
             <h4 class="card-title text-truncate" onclick="$('#{{ md5 .title }}').modal('show');">{{ .title }}</h4>
@@ -145,7 +145,7 @@
 
 {{ if $data.homepage.success_banner.enable }}
 {{ with $data.homepage.success_banner }}
-<section class="section bg-cover" data-background="{{ .image | absURL }}" id="success">
+<section class="section bg-cover" style="background-image: url('{{ .image | absURL }}');" id="success">
   <div class="container">
     <div class="row feature-blocks bg-white justify-content-between">
       {{ range .feature_item }}
@@ -154,7 +154,7 @@
           <img src="{{ . }}" class="mb-xl-4 mb-lg-3 mb-4 feature-icon"></img>
         {{ end }}
         {{ with .icon }}
-          <i class="{{ . }} mb-xl-4 mb-lg-3 mb-4 feature-icon"></i>
+          <span class="mb-xl-4 mb-lg-3 mb-4 feature-icon d-flex">{{ partial "mdi" . }}</span>
         {{ end }}
         <h3 class="mb-xl-4 mb-lg-3 mb-4">{{ .name | markdownify }}</h3>
         <div class="content">

layouts/kontakt/list.html

@@ -30,12 +30,12 @@
             <li class="list-group-item">
               <p class="card-title mb-0">{{ .name }}</p>
               <p class="text-muted mb-0">{{ .position }}</p>
-              <p class="card-text"><a href="mailto:{{ .email }}"><i class="mdi mdi-email-multiple-outline me-2"></i>{{ with (split .email "@") }}{{ print (index . 0) "(at)" (index . 1) }}{{ end }}</a></p>
+              <p class="card-text"><a href="mailto:{{ .email }}">{{ partial "mdi" "email-multiple-outline" }}<span class="ms-2">{{ with (split .email "@") }}{{ print (index . 0) (partial "mdi" "at") (index . 1) | safeHTML }}{{ end }}</span></a></p>
             </li>
             {{ end }}
             <li class="list-group-item">
-              <p class="card-text"><i class="mdi mdi-phone-outline me-2"></i>Telefon: <a href="tel:+493456903156">+49-0345/6903156</a></p>
+              <p class="card-text">{{ partial "mdi" "phone-outline" }}<span class="ms-2">Telefon: <a href="tel:+493456903156">+49-0345/6903156</a></span></p>
-              <p class="card-text"><i class="mdi mdi-fax me-2"></i>Fax: <a href="tel:+493456903157">+49-0345/6903157</a></p>
+              <p class="card-text">{{ partial "mdi" "fax" }}<span class="ms-2">Fax: <a href="tel:+493456903157">+49-0345/6903157</a></span></p>
             </li>
           </ul>
         </div>

layouts/partials/card-article.html

@@ -2,10 +2,13 @@
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body d-flex flex-column">
     <div class="d-flex justify-content-between gap-1 flex-wrap mb-2">
-      <span><i class="mdi mdi-calendar-today me-2"></i>{{ time.Format "02. Jan 2006" .PublishDate }}</span>
+      <span>
+        {{ partial "mdi" "calendar-today"}}
+        <span class="ms-2">{{ time.Format "02. Jan 2006" .PublishDate }}</span>
+      </span>
       <span class="text-truncate">
-        <i class="mdi mdi-fountain-pen-tip me-2"></i>
+        {{ partial "mdi" "fountain-pen-tip" }}
-        {{ partial "authors" (dict "Site" .Site "author" .Params.author )}}
+        <span class="ms-2">{{ partial "authors" (dict "Site" .Site "author" .Params.author )}}</span>
       </span>
     </div>
     <h4 class="card-title text-truncate"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>

layouts/partials/card-category.html

@@ -1,7 +1,7 @@
 <div class="card border-primary rounded-0 hover-shadow mb-2">
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.Image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body">
-    <div class="mb-2"><i class="mdi mdi-bookmark-outline me-2"></i>{{ .Params.category }}</div>
+    <div class="mb-2">{{ partial "mdi" "bookmark-outline" }}<span class="ms-2">{{ .Params.category }}</span></div>
     <h4 class="card-title text-truncate"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>Mehr anzeigen</a>
   </div>

layouts/partials/download.html

@@ -1,6 +1,6 @@
 <div class="shortcode card border-primary rounded-0 hover-shadow mb-2">
   <div class="card-body mb-0">
     <h4 class="card-title"><a class="text-decoration-none" href='{{ .link }}'>{{ .title }}</a></h4>
-    <a href='{{ .link }}' class="text-decoration-none btn btn-primary btn-sm mb-0"><i class="mdi mdi-tray-arrow-down me-2"></i>Download</a>
+    <a href='{{ .link }}' class="text-decoration-none btn btn-primary btn-sm mb-0">{{ partial "mdi" "tray-arrow-down" }}<span class="ms-2">Download</span></a>
   </div>
 </div>

layouts/partials/footer.html

@@ -54,7 +54,7 @@
         <div class="col-sm-5 text-sm-end text-center">
           <ul class="list-inline">
             {{ range .Site.Params.social }}
-            <li class="list-inline-item"><a class="d-inline-block p-2" href="{{ .link | safeURL }}"><i class="{{ .icon }} text-primary"></i></a></li>
+            <li class="list-inline-item"><a class="d-inline-block p-2" href="{{ .link | safeURL }}"><span class="text-primary">{{ partial "mdi" .icon }}</span></a></li>
             {{ end }}
           </ul>
         </div>

layouts/partials/ganztag.html

@@ -1,8 +1,8 @@
 <div class="card border-primary rounded-0 hover-shadow mb-2">
   <a href="{{ .Permalink }}"><img class="card-img-top rounded-0" src="{{ .Params.image | relURL }}" alt="{{ .Title }}"></a>
   <div class="card-body">
-    <div class="mb-2 text-truncate"><i class="mdi mdi-calendar-today me-2"></i>{{ .Params.schedule }}</div>
+    <div class="mb-2 text-truncate">{{ partial "mdi" "calendar-today" }}<span class="ms-2">{{ .Params.schedule }}</span></div>
-    <div class="mb-2 text-truncate"><i class="mdi mdi-crowd me-2"></i>{{ .Params.class }}</div>
+    <div class="mb-2 text-truncate">{{ partial "mdi" "crowd"}}<span class="ms-2">{{ .Params.class }}</span></div>
     <h4 class="card-title text-truncate"><a href="{{ .Permalink }}">{{ .Title }}</a></h4>
     <a href="{{ .Permalink }}" class="btn btn-primary btn-sm" data-pagefind-ignore>Mehr anzeigen</a>
   </div>

layouts/partials/header-contest.html

@@ -5,7 +5,7 @@
     {{ end }}
     <div class="d-flex justify-content-between mb-4">
       <div class="d-flex align-items-center">
-        <i class="mdi mdi-crowd text-primary icon-md me-2"></i>
+        <span class="text-primary icon-md me-2 d-flex">{{ partial "mdi" "crowd"}}</span>
         <div class="text-start">
           <h6 class="mb-0 text-uppercase">Klassen</h6>
           <p class="mb-0">{{ .Params.class }}</p>

layouts/partials/header.html

@@ -6,8 +6,9 @@
         <div class="col-lg-4 text-center text-lg-start">
           <ul class="list-inline">
             {{ range .Site.Params.social }}
-            <li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-body-secondary" href="{{ .link | safeURL }}"><i
+            <li class="list-inline-item mx-0"><a class="d-inline-block p-2 text-body-secondary" href="{{ .link | safeURL }}">
-                  class="{{ .icon }}"></i></a></li>
+              {{ partial "mdi" .icon }}
+            </a></li>
             {{ end }}
           </ul>
         </div>
@@ -20,7 +21,7 @@
             </li>
             <li class="list-inline-item">
               <a class="text-body-secondary" href="mailto:{{ .Site.Params.email }}">
-                <strong class="text-uppercase">E-Mail:</strong> {{ .Site.Params.email_label | safeHTML }}
+                <strong class="text-uppercase">E-Mail:</strong> {{ replace .Site.Params.email_label "(at)" (partial "mdi" "at") | safeHTML }}
               </a>
             </li>
           </ul>
@@ -67,7 +68,7 @@
             {{ end }}
             {{ end }}
             <li class="nav-item">
-              <div class="nav-link nav-search" onclick="$('#pagefind-search').modal('show');">Suche</button>
+              <div class="nav-link nav-search" onclick="$('#pagefind-search').modal('show');">{{ partial "mdi" "magnify" }}Suche</div>
             </li>
           </ul>
         </div>
@@ -90,7 +91,7 @@
   <div id="top-banner" class="p-3" style="background: {{ .color }}" data-pagefind-ignore>
     <div class="container">
       <div class="no-gutters align-items-center">
-        <div style="color: {{ .font_color }}"><b><i class="{{ .icon }}"></i> {{ .text | markdownify }}</b></div>
+        <div style="color: {{ .font_color }}"><b>{{ partial "mdi" .icon }} {{ .text | markdownify }}</b></div>
       </div>
     </div>
   </div>

layouts/partials/icon-element.html

@@ -1,6 +1,6 @@
 <div class="col-lg-{{.size}} col-sm-{{ mul (int .size) 2 }} mb-3 mb-sm-0">
 	<div class="d-flex align-items-center">
-		<i class="mdi {{ .icon }} text-primary icon-md me-2"></i>
+		<span class="text-primary icon-md d-flex me-2">{{ partial "mdi" .icon }}</span>
 		<div class="text-start">
 		  <h6 class="mb-0 text-uppercase">{{ .title }}</h6>
 		  <p class="mb-0">{{ .content }}</p>

layouts/partials/info.html

@@ -1,10 +1,10 @@
 {{ with .Site.Data.homepage.info }}
-<section class="section bg-cover" data-background="{{ .bg_image | absURL }}">
+<section class="section bg-cover" style="background-image: url('{{ .bg_image | absURL }}');">
   <div class="container">
     <div class="row">
       <div class="col-lg-6 col-sm-4 position-relative intro-video">
         <a class="play-btn vb-video" href="{{ .video_link | safeURL }}" data-vbtype="video">
-          <i class="mdi mdi-play icon-md"></i>
+          <span class="icon-md d-flex">{{ partial "mdi" "play" }}</span>
         </a>
       </div>
       <div class="col-lg-6 col-sm-8">

layouts/partials/mdi.html

@@ -0,0 +1 @@
+{{ partial "icons/icon" (dict "vendor" "mdi" "name" .) }}

layouts/partials/page-header.html

@@ -4,7 +4,7 @@
       <div class="col-md-8 position-relative" data-pagefind-body>
         <ul class="list-inline">
           <li class="list-inline-item h2" data-pagefind-ignore><a class="text-primary font-header" href="{{ if .Params.Previous.enable }}{{ .Params.Previous.link }}{{ else if .Parent.Page }}{{ .Parent.Page.Permalink }}{{ else }}{{ .Site.baseURL | absURL }}{{ end }}">{{ if .Params.previous.enable }}{{ .Params.previous.title }}{{ else }}{{ with .Parent.Params.title }}{{.}}{{ else }}Startseite{{ end }}{{ end }}</a></li>
-          <li class="list-inline-item h2"><i class="mdi mdi-chevron-double-right text-white"></i></li>
+          <li class="list-inline-item h2">{{ partial "icons/icon" (dict "vendor" "mdi" "name" "chevron-double-right" "className" "align-bottom text-white") }}</li>
           <li class="list-inline-item text-white h2 font-header" data-pagefind-weight="10">{{ .Title }}</li>
         </ul>
         <p class="text-white text-opacity-75">{{ .Params.description | markdownify }}</p>

layouts/partials/pagination.html

@@ -10,14 +10,14 @@
     {{ if ne $paginator.PageNumber 1 }}
     <li class="page-item">
       <a class="page-link" href="{{ $paginator.First.URL }}">
-        <i class="mdi mdi-step-backward-2"></i>
+        {{ partial "mdi" "step-backward-2" }}
       </a>
     </li>
     {{ end }}
     {{ if $paginator.HasPrev }}
     <li class="page-item">
       <a href="{{ $paginator.Prev.URL }}" class="page-link">
-        <i class="mdi mdi-step-backward"></i>
+        {{ partial "mdi" "step-backward" }}
       </a>
     </li>
     {{ end }}
@@ -51,14 +51,14 @@
     {{ if $paginator.HasNext }}
     <li class="page-item">
       <a href="{{ $paginator.Next.URL }}" class="page-link">
-        <i class="mdi mdi-step-forward"></i>
+        {{ partial "mdi" "step-forward" }}
       </a>
     </li>
     {{ end }}
     {{ if ne $paginator.PageNumber $paginator.TotalPages }}
     <li class="page-item">
       <a class="page-link" href="{{ $paginator.Last.URL }}">
-        <i class="mdi mdi-step-forward-2"></i>
+        {{ partial "mdi" "step-forward-2" }}
       </a>
     </li>
     {{ end }}

layouts/partials/termin.html

@@ -10,7 +10,8 @@
         <h4 class="card-title mb-0">{{ .title }}</h4>
         {{ with .location }}
         <div class="card-text d-flex align-items-center">
-          <i class="mdi mdi-map-marker-radius-outline icon-s text-primary me-2"></i>{{ . | markdownify }}
+          <span class="text-primary icon-s d-flex me-2">{{ partial "mdi" "map-marker-radius-outline" }}</span>
+          {{ . | markdownify }}
         </div>
         {{ end }}
       </div>

layouts/partials/tile-modals.html

@@ -11,7 +11,7 @@
         <div class="col-lg-4 col-sm-6">
           <div class="card border-primary rounded-0 hover-shadow mb-4">
             <div class="container fb-tile-color" style="background-color:{{ .bg_color }};">
-              <i class="{{ .icon }} fb-tile-icon" style="color: {{ .font_color }}"></i>
+              <span class="fb-tile-icon" style="color: {{ .font_color }}">{{ partial "mdi" .icon }}</span>
             </div>
             <div class="card-body">
               <h4 class="card-title text-truncate">{{ .title }}</h4>

static/admin/config/collections/widgets.js

@@ -41,7 +41,7 @@ const IconList = {
   label: "Symbol",
   widget: "string",
   required: false,
-  hint: "Liste unter https://assets.cantorgymnasium.de/fonts/mdi/v7/preview.html",
+  hint: "Liste unter https://assets.cantorgymnasium.de/fonts/mdi/v7/preview.html. Das `mdi` am Anfang ist wegzulassen.",
 };
 
 const PreviewNumber = {