Allow overriding all inlined icons via yaml only

material/base.html

@@ -108,7 +108,8 @@
           <div class="md-banner__inner md-grid md-typeset">
             {% if "announce.dismiss" in features %}
               <button class="md-banner__button md-icon" aria-label="{{ lang.t('announce.dismiss') }}">
-                {% include ".icons/material/close.svg" %}
+                {% set icon = config.theme.icon.close or "material/close" %}
+                {% include ".icons/" ~ icon ~ ".svg" %}
               </button>
             {% endif %}
             {% block announce %}{% endblock %}
@@ -184,7 +185,8 @@
         </div>
         {% if "navigation.top" in features %}
           <button type="button" class="md-top md-icon" data-md-component="top" hidden>
-            {% include ".icons/material/arrow-up.svg" %}
+            {% set icon = config.theme.icon.top or "material/arrow-up" %}
+            {% include ".icons/" ~ icon ~ ".svg" %}
             {{ lang.t("top") }}
           </button>
         {% endif %}

material/mkdocs_theme.yml

@@ -48,8 +48,8 @@ font:
   # Fixed-width font for code listings
   code: Roboto Mono
 
-# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs. Some
+# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs.
-# icons that are part of the HTML can be configured and replaced
+# Icons that are part of the HTML can be configured and replaced
 icon:
 
 # Favicon to be rendered

material/partials/footer.html

@@ -12,7 +12,8 @@
           {% set direction = lang.t("footer.previous") %}
           <a href="{{ page.previous_page.url | url }}" class="md-footer__link md-footer__link--prev" aria-label="{{ direction }}: {{ page.previous_page.title | e }}" rel="prev">
             <div class="md-footer__button md-icon">
-              {% include ".icons/material/arrow-left.svg" %}
+              {% set icon = config.theme.icon.previous or "material/arrow-left" %}
+              {% include ".icons/" ~ icon ~ ".svg" %}
             </div>
             <div class="md-footer__title">
               <span class="md-footer__direction">
@@ -36,7 +37,8 @@
               </div>
             </div>
             <div class="md-footer__button md-icon">
-              {% include ".icons/material/arrow-right.svg" %}
+              {% set icon = config.theme.icon.next or "material/arrow-right" %}
+              {% include ".icons/" ~ icon ~ ".svg" %}
             </div>
           </a>
         {% endif %}

material/partials/header.html

@@ -13,7 +13,8 @@
       {% include "partials/logo.html" %}
     </a>
     <label class="md-header__button md-icon" for="__drawer">
-      {% include ".icons/material/menu" ~ ".svg" %}
+      {% set icon = config.theme.icon.menu or "material/menu" %}
+      {% include ".icons/" ~ icon ~ ".svg" %}
     </label>
     <div class="md-header__title" data-md-component="header-title">
       <div class="md-header__ellipsis">
@@ -69,7 +70,8 @@
     {% endif %}
     {% if "material/search" in config.plugins %}
       <label class="md-header__button md-icon" for="__search">
-        {% include ".icons/material/magnify.svg" %}
+        {% set icon = config.theme.icon.search or "material/magnify" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
       </label>
       {% include "partials/search.html" %}
     {% endif %}

material/partials/search.html

@@ -7,17 +7,21 @@
     <form class="md-search__form" name="search">
       <input type="text" class="md-search__input" name="query" aria-label="{{ lang.t('search.placeholder') }}" placeholder="{{ lang.t('search.placeholder') }}" autocapitalize="off" autocorrect="off" autocomplete="off" spellcheck="false" data-md-component="search-query" required>
       <label class="md-search__icon md-icon" for="__search">
-        {% include ".icons/material/magnify.svg" %}
+        {% set icon = config.theme.icon.search or "material/magnify" %}
-        {% include ".icons/material/arrow-left.svg" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
+        {% set icon = config.theme.icon.previous or "material/arrow-left" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
       </label>
       <nav class="md-search__options" aria-label="{{ lang.t('search') }}">
         {% if "search.share" in features %}
           <a href="javascript:void(0)" class="md-search__icon md-icon" title="{{ lang.t('search.share') }}" aria-label="{{ lang.t('search.share') }}" data-clipboard data-clipboard-text="" data-md-component="search-share" tabindex="-1">
-            {% include ".icons/material/share-variant.svg" %}
+            {% set icon = config.theme.icon.share or "material/share-variant" %}
+            {% include ".icons/" ~ icon ~ ".svg" %}
           </a>
         {% endif %}
         <button type="reset" class="md-search__icon md-icon" title="{{ lang.t('search.reset') }}" aria-label="{{ lang.t('search.reset') }}" tabindex="-1">
-          {% include ".icons/material/close.svg" %}
+          {% set icon = config.theme.icon.close or "material/close" %}
+          {% include ".icons/" ~ icon ~ ".svg" %}
         </button>
       </nav>
       {% if "search.suggest" in features %}

src/base.html

@@ -223,7 +223,8 @@
                 class="md-banner__button md-icon"
                 aria-label="{{ lang.t('announce.dismiss') }}"
               >
-                {% include ".icons/material/close.svg" %}
+                {% set icon = config.theme.icon.close or "material/close" %}
+                {% include ".icons/" ~ icon ~ ".svg" %}
               </button>
             {% endif %}
 
@@ -340,7 +341,8 @@
             data-md-component="top"
             hidden
           >
-            {% include ".icons/material/arrow-up.svg" %}
+            {% set icon = config.theme.icon.top or "material/arrow-up" %}
+            {% include ".icons/" ~ icon ~ ".svg" %}
             {{ lang.t("top") }}
           </button>
         {% endif %}

src/mkdocs_theme.yml

@@ -48,8 +48,8 @@ font:
   # Fixed-width font for code listings
   code: Roboto Mono
 
-# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs. Some
+# From Material 5.x on, icons are inlined into the HTML and CSS as SVGs.
-# icons that are part of the HTML can be configured and replaced
+# Icons that are part of the HTML can be configured and replaced
 icon:
 
 # Favicon to be rendered

src/partials/footer.html

@@ -45,7 +45,8 @@
             rel="prev"
           >
             <div class="md-footer__button md-icon">
-              {% include ".icons/material/arrow-left.svg" %}
+              {% set icon = config.theme.icon.previous or "material/arrow-left" %}
+              {% include ".icons/" ~ icon ~ ".svg" %}
             </div>
             <div class="md-footer__title">
               <span class="md-footer__direction">
@@ -76,7 +77,8 @@
               </div>
             </div>
             <div class="md-footer__button md-icon">
-              {% include ".icons/material/arrow-right.svg" %}
+              {% set icon = config.theme.icon.next or "material/arrow-right" %}
+              {% include ".icons/" ~ icon ~ ".svg" %}
             </div>
           </a>
         {% endif %}

src/partials/header.html

@@ -48,7 +48,8 @@
 
     <!-- Button to open drawer -->
     <label class="md-header__button md-icon" for="__drawer">
-      {% include ".icons/material/menu" ~ ".svg" %}
+      {% set icon = config.theme.icon.menu or "material/menu" %}
+      {% include ".icons/" ~ icon ~ ".svg" %}
     </label>
 
     <!-- Header title -->
@@ -138,7 +139,8 @@
     <!-- Button to open search modal -->
     {% if "material/search" in config.plugins %}
       <label class="md-header__button md-icon" for="__search">
-        {% include ".icons/material/magnify.svg" %}
+        {% set icon = config.theme.icon.search or "material/magnify" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
       </label>
 
       <!-- Search interface -->

src/partials/search.html

@@ -43,8 +43,10 @@
 
       <!-- Button to open search -->
       <label class="md-search__icon md-icon" for="__search">
-        {% include ".icons/material/magnify.svg" %}
+        {% set icon = config.theme.icon.search or "material/magnify" %}
-        {% include ".icons/material/arrow-left.svg" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
+        {% set icon = config.theme.icon.previous or "material/arrow-left" %}
+        {% include ".icons/" ~ icon ~ ".svg" %}
       </label>
 
       <!-- Search options -->
@@ -65,7 +67,8 @@
             data-md-component="search-share"
             tabindex="-1"
           >
-            {% include ".icons/material/share-variant.svg" %}
+            {% set icon = config.theme.icon.share or "material/share-variant" %}
+            {% include ".icons/" ~ icon ~ ".svg" %}
           </a>
         {% endif %}
 
@@ -77,7 +80,8 @@
           aria-label="{{ lang.t('search.reset') }}"
           tabindex="-1"
         >
-          {% include ".icons/material/close.svg" %}
+          {% set icon = config.theme.icon.close or "material/close" %}
+          {% include ".icons/" ~ icon ~ ".svg" %}
         </button>
       </nav>