OpenSourceArk/mkdocs-material
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2024-06-14 11:52:32 +03:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #5281 from nejch/feat/all-icons-yaml

Browse Source 
Allow overriding all HTML-inlined icons via yaml only
This commit is contained in:
Martin Donath 2023-07-06 15:53:50 +02:00 committed by GitHub
commit b2a20a2a11
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 75 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

31
docs/setup/changing-the-logo-and-icons.md
View File

@ -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

6
material/base.html
View File

@ -116,7 +116,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 %}
@ -192,7 +193,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 %}

4
material/mkdocs_theme.yml
View File

@ -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

6
material/partials/footer.html
View File

@ -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 %}

6
material/partials/header.html
View File

@ -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">
@ -73,7 +74,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 %}

12
material/partials/search.html
View File

@ -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 %}

6
src/base.html
View File

@ -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" %}
</button>
{% 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") }}
</button>
{% endif %}

4
src/mkdocs_theme.yml
View File

@ -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

6
src/partials/footer.html
View File

@ -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 %}

6
src/partials/header.html
View File

@ -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 -->
@ -142,7 +143,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 -->

12
src/partials/search.html
View File

@ -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>