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 diff --git a/material/base.html b/material/base.html index 5cc9944f8..b0f974fa7 100644 --- a/material/base.html +++ b/material/base.html @@ -116,7 +116,8 @@
{% if "announce.dismiss" in features %} {% endif %} {% block announce %}{% endblock %} @@ -192,7 +193,8 @@
{% if "navigation.top" in features %} {% endif %} diff --git a/material/mkdocs_theme.yml b/material/mkdocs_theme.yml index 89ab33054..aaa47f5ea 100644 --- a/material/mkdocs_theme.yml +++ b/material/mkdocs_theme.yml @@ -38,8 +38,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") %} {% endif %} diff --git a/material/partials/header.html b/material/partials/header.html index 3b3c52f71..f35aa254c 100644 --- a/material/partials/header.html +++ b/material/partials/header.html @@ -13,7 +13,8 @@ {% include "partials/logo.html" %}
@@ -73,7 +74,8 @@ {% endif %} {% if "material/search" in config.plugins %} {% 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 @@
{% if "search.suggest" in features %} diff --git a/src/base.html b/src/base.html index f81bebc6a..2628a8794 100644 --- a/src/base.html +++ b/src/base.html @@ -243,7 +243,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" %} {% endif %} @@ -360,7 +361,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") }} {% endif %} diff --git a/src/mkdocs_theme.yml b/src/mkdocs_theme.yml index 89ab33054..aaa47f5ea 100644 --- a/src/mkdocs_theme.yml +++ b/src/mkdocs_theme.yml @@ -38,8 +38,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" >
{% endif %} diff --git a/src/partials/header.html b/src/partials/header.html index b02d09249..f76c76344 100644 --- a/src/partials/header.html +++ b/src/partials/header.html @@ -48,7 +48,8 @@ @@ -142,7 +143,8 @@ {% if "material/search" in config.plugins %} 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 @@ @@ -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" %} {% 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" %}