From 4fccd06b78babf6e009cad753648f0640bbead46 Mon Sep 17 00:00:00 2001
From: Nejc Habjan <nejc.habjan@siemens.com>
Date: Mon, 27 Mar 2023 17:24:56 +0200
Subject: [PATCH 1/2] Allow overriding all inlined icons via yaml only

---
 material/base.html            |  6 ++++--
 material/mkdocs_theme.yml     |  4 ++--
 material/partials/footer.html |  6 ++++--
 material/partials/header.html |  6 ++++--
 material/partials/search.html | 12 ++++++++----
 src/base.html                 |  6 ++++--
 src/mkdocs_theme.yml          |  4 ++--
 src/partials/footer.html      |  6 ++++--
 src/partials/header.html      |  6 ++++--
 src/partials/search.html      | 12 ++++++++----
 10 files changed, 44 insertions(+), 24 deletions(-)

diff --git a/material/base.html b/material/base.html
index b4ca1ce04..b3860fc3e 100644
--- a/material/base.html
+++ b/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 %}
diff --git a/material/mkdocs_theme.yml b/material/mkdocs_theme.yml
index a1790e907..0c9653034 100644
--- a/material/mkdocs_theme.yml
+++ b/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
-# icons that are part of the HTML can be configured and replaced
+# 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
 icon:
 
 # Favicon to be rendered
diff --git a/material/partials/footer.html b/material/partials/footer.html
index 6afb8f43e..79e312676 100644
--- a/material/partials/footer.html
+++ b/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 %}
diff --git a/material/partials/header.html b/material/partials/header.html
index 89f9513be..9a7bd6e94 100644
--- a/material/partials/header.html
+++ b/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 %}
diff --git a/material/partials/search.html b/material/partials/search.html
index daf177295..4ad3b36fa 100644
--- a/material/partials/search.html
+++ b/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" %}
-        {% include ".icons/material/arrow-left.svg" %}
+        {% set icon = config.theme.icon.search or "material/magnify" %}
+        {% 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 %}
diff --git a/src/base.html b/src/base.html
index 5bafbb145..71555c5ec 100644
--- a/src/base.html
+++ b/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 %}
diff --git a/src/mkdocs_theme.yml b/src/mkdocs_theme.yml
index a1790e907..0c9653034 100644
--- a/src/mkdocs_theme.yml
+++ b/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
-# icons that are part of the HTML can be configured and replaced
+# 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
 icon:
 
 # Favicon to be rendered
diff --git a/src/partials/footer.html b/src/partials/footer.html
index f04455fbc..665b455fe 100644
--- a/src/partials/footer.html
+++ b/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 %}
diff --git a/src/partials/header.html b/src/partials/header.html
index d8a6e910a..1bc98b1eb 100644
--- a/src/partials/header.html
+++ b/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 -->
diff --git a/src/partials/search.html b/src/partials/search.html
index 7987456bc..1854a7d36 100644
--- a/src/partials/search.html
+++ b/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" %}
-        {% include ".icons/material/arrow-left.svg" %}
+        {% set icon = config.theme.icon.search or "material/magnify" %}
+        {% 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>
 

From 61630f2d405407366956d672e7782b0839a87219 Mon Sep 17 00:00:00 2001
From: Nejc Habjan <nejc.habjan@siemens.com>
Date: Fri, 31 Mar 2023 11:48:05 +0200
Subject: [PATCH 2/2] Document customizable site icons

---
 docs/setup/changing-the-logo-and-icons.md | 31 +++++++++++++++++++++++
 1 file changed, 31 insertions(+)

diff --git a/docs/setup/changing-the-logo-and-icons.md b/docs/setup/changing-the-logo-and-icons.md
index c267fba00..c1fac775c 100644
--- a/docs/setup/changing-the-logo-and-icons.md
+++ b/docs/setup/changing-the-logo-and-icons.md
@@ -72,6 +72,37 @@ theme:
   [Favicon support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
   [Favicon default]: https://github.com/squidfunk/mkdocs-material/blob/master/material/assets/images/favicon.png
 
+### Site icons
+
+Most icons you see on your site, such as navigation icons, can also be changed. For example,
+to change the navigation arrows in the footer, add the following lines to `mkdocs.yml`:
+
+```yaml
+theme:
+  icon:
+    previous: fontawesome/solid/angle-left
+    next: fontawesome/solid/angle-right
+```
+
+The following is a complete list of customizable icons used by the theme:
+
+| Icon name    | Purpose                                                                       |
+|:-------------|:------------------------------------------------------------------------------|
+| `logo`       | See [Logo](#logo)                                                             |
+| `menu`       | Open drawer                                                                   |
+| `alternate`  | Change language                                                               |
+| `search`     | Search icon                                                                   |
+| `share`      | Share search                                                                  |
+| `close`      | Reset search, dismiss announcements                                           |
+| `top`        | Back-to-top button                                                            |
+| `edit`       | Edit current page                                                             |
+| `view`       | View page source                                                              |
+| `repo`       | Repository icon                                                               |
+| `admonition` | See [Admonition icons](../reference/admonitions.md#admonition-icons)          |
+| `tag`        | See [Tag icons and identifiers](setting-up-tags.md#tag-icons-and-identifiers) |
+| `previous`   | Previous page in footer, hide search on mobile                                |
+| `next`       | Next page in footer                                                           |
+
 ## Customization
 
 ### Additional icons