mirror of
https://github.com/squidfunk/mkdocs-material.git
synced 2025-01-19 01:14:06 +01:00
Merge pull request #5281 from nejch/feat/all-icons-yaml
Allow overriding all HTML-inlined icons via yaml only
This commit is contained in:
commit
b2a20a2a11
@ -72,6 +72,37 @@ theme:
|
|||||||
[Favicon support]: https://github.com/squidfunk/mkdocs-material/releases/tag/0.1.0
|
[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
|
[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
|
## Customization
|
||||||
|
|
||||||
### Additional icons
|
### Additional icons
|
||||||
|
@ -116,7 +116,8 @@
|
|||||||
<div class="md-banner__inner md-grid md-typeset">
|
<div class="md-banner__inner md-grid md-typeset">
|
||||||
{% if "announce.dismiss" in features %}
|
{% if "announce.dismiss" in features %}
|
||||||
<button class="md-banner__button md-icon" aria-label="{{ lang.t('announce.dismiss') }}">
|
<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>
|
</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% block announce %}{% endblock %}
|
{% block announce %}{% endblock %}
|
||||||
@ -192,7 +193,8 @@
|
|||||||
</div>
|
</div>
|
||||||
{% if "navigation.top" in features %}
|
{% if "navigation.top" in features %}
|
||||||
<button type="button" class="md-top md-icon" data-md-component="top" hidden>
|
<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") }}
|
{{ lang.t("top") }}
|
||||||
</button>
|
</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -38,8 +38,8 @@ font:
|
|||||||
# Fixed-width font for code listings
|
# Fixed-width font for code listings
|
||||||
code: Roboto Mono
|
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:
|
icon:
|
||||||
|
|
||||||
# Favicon to be rendered
|
# Favicon to be rendered
|
||||||
|
@ -12,7 +12,8 @@
|
|||||||
{% set direction = lang.t("footer.previous") %}
|
{% 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">
|
<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">
|
<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>
|
||||||
<div class="md-footer__title">
|
<div class="md-footer__title">
|
||||||
<span class="md-footer__direction">
|
<span class="md-footer__direction">
|
||||||
@ -36,7 +37,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer__button md-icon">
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -13,7 +13,8 @@
|
|||||||
{% include "partials/logo.html" %}
|
{% include "partials/logo.html" %}
|
||||||
</a>
|
</a>
|
||||||
<label class="md-header__button md-icon" for="__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>
|
</label>
|
||||||
<div class="md-header__title" data-md-component="header-title">
|
<div class="md-header__title" data-md-component="header-title">
|
||||||
<div class="md-header__ellipsis">
|
<div class="md-header__ellipsis">
|
||||||
@ -73,7 +74,8 @@
|
|||||||
{% endif %}
|
{% endif %}
|
||||||
{% if "material/search" in config.plugins %}
|
{% if "material/search" in config.plugins %}
|
||||||
<label class="md-header__button md-icon" for="__search">
|
<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>
|
</label>
|
||||||
{% include "partials/search.html" %}
|
{% include "partials/search.html" %}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -7,17 +7,21 @@
|
|||||||
<form class="md-search__form" name="search">
|
<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>
|
<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">
|
<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>
|
</label>
|
||||||
<nav class="md-search__options" aria-label="{{ lang.t('search') }}">
|
<nav class="md-search__options" aria-label="{{ lang.t('search') }}">
|
||||||
{% if "search.share" in features %}
|
{% 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">
|
<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>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
<button type="reset" class="md-search__icon md-icon" title="{{ lang.t('search.reset') }}" aria-label="{{ lang.t('search.reset') }}" tabindex="-1">
|
<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>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
{% if "search.suggest" in features %}
|
{% if "search.suggest" in features %}
|
||||||
|
@ -243,7 +243,8 @@
|
|||||||
class="md-banner__button md-icon"
|
class="md-banner__button md-icon"
|
||||||
aria-label="{{ lang.t('announce.dismiss') }}"
|
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>
|
</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
@ -360,7 +361,8 @@
|
|||||||
data-md-component="top"
|
data-md-component="top"
|
||||||
hidden
|
hidden
|
||||||
>
|
>
|
||||||
{% include ".icons/material/arrow-up.svg" %}
|
{% set icon = config.theme.icon.top or "material/arrow-up" %}
|
||||||
|
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||||
{{ lang.t("top") }}
|
{{ lang.t("top") }}
|
||||||
</button>
|
</button>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -38,8 +38,8 @@ font:
|
|||||||
# Fixed-width font for code listings
|
# Fixed-width font for code listings
|
||||||
code: Roboto Mono
|
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:
|
icon:
|
||||||
|
|
||||||
# Favicon to be rendered
|
# Favicon to be rendered
|
||||||
|
@ -45,7 +45,8 @@
|
|||||||
rel="prev"
|
rel="prev"
|
||||||
>
|
>
|
||||||
<div class="md-footer__button md-icon">
|
<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>
|
||||||
<div class="md-footer__title">
|
<div class="md-footer__title">
|
||||||
<span class="md-footer__direction">
|
<span class="md-footer__direction">
|
||||||
@ -76,7 +77,8 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="md-footer__button md-icon">
|
<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>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
@ -48,7 +48,8 @@
|
|||||||
|
|
||||||
<!-- Button to open drawer -->
|
<!-- Button to open drawer -->
|
||||||
<label class="md-header__button md-icon" for="__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>
|
</label>
|
||||||
|
|
||||||
<!-- Header title -->
|
<!-- Header title -->
|
||||||
@ -142,7 +143,8 @@
|
|||||||
<!-- Button to open search modal -->
|
<!-- Button to open search modal -->
|
||||||
{% if "material/search" in config.plugins %}
|
{% if "material/search" in config.plugins %}
|
||||||
<label class="md-header__button md-icon" for="__search">
|
<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>
|
</label>
|
||||||
|
|
||||||
<!-- Search interface -->
|
<!-- Search interface -->
|
||||||
|
@ -43,8 +43,10 @@
|
|||||||
|
|
||||||
<!-- Button to open search -->
|
<!-- Button to open search -->
|
||||||
<label class="md-search__icon md-icon" for="__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>
|
</label>
|
||||||
|
|
||||||
<!-- Search options -->
|
<!-- Search options -->
|
||||||
@ -65,7 +67,8 @@
|
|||||||
data-md-component="search-share"
|
data-md-component="search-share"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
{% include ".icons/material/share-variant.svg" %}
|
{% set icon = config.theme.icon.share or "material/share-variant" %}
|
||||||
|
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||||
</a>
|
</a>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
@ -77,7 +80,8 @@
|
|||||||
aria-label="{{ lang.t('search.reset') }}"
|
aria-label="{{ lang.t('search.reset') }}"
|
||||||
tabindex="-1"
|
tabindex="-1"
|
||||||
>
|
>
|
||||||
{% include ".icons/material/close.svg" %}
|
{% set icon = config.theme.icon.close or "material/close" %}
|
||||||
|
{% include ".icons/" ~ icon ~ ".svg" %}
|
||||||
</button>
|
</button>
|
||||||
</nav>
|
</nav>
|
||||||
|
|
||||||
|
Loading…
x
Reference in New Issue
Block a user