starred/mkdocs-material-squidfunk-3
1
0
Fork 0
mirror of https://github.com/squidfunk/mkdocs-material.git synced 2026-07-22 05:31:42 -04:00
Code Issues Packages Projects Releases Wiki Activity

Improved discoverability of icons in the documentation

Browse Source
This commit is contained in:
squidfunk
2022-01-16 17:27:14 +01:00
parent a919199008
commit 840a00a6f6
17 changed files with 184 additions and 83 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
docs/reference/admonitions.md
View File

@@ -49,8 +49,16 @@ theme:
<type>: <icon> # (1)!
```
1. Set `<type`> to any of the [supported types] and `<icon>` to any valid icon
shortcode, which you can find by using the [icon search].
1. Enter a few keywords to find the perfect icon using our [icon search] and
click on the shortcode to copy it to your clipboard:
<div class="mdx-iconsearch" data-mdx-component="iconsearch">
<input class="md-input md-input--stretch mdx-iconsearch__input" placeholder="Search icon" data-mdx-component="iconsearch-query" value="alert" />
<div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result" data-mdx-mode="file">
<div class="mdx-iconsearch-result__meta"></div>
<ol class="mdx-iconsearch-result__list"></ol>
</div>
</div>
??? example "Expand to show alternate icon sets"

2
docs/reference/buttons.md
View File

@@ -69,7 +69,7 @@ CSS class selectors.
### Adding icon buttons
Of course, icons can be added to all types of buttons by using the [icon syntax]
together with any valid icon shortcode, which can be easily found with a few keystrokes through the [icon search].
together with any valid icon shortcode, which can be easily found with a few keystrokes through our [icon search].
``` markdown title="Button with icon"
[Send :fontawesome-solid-paper-plane:](#){ .md-button }

13
docs/reference/icons-emojis.md
View File

@@ -198,10 +198,21 @@ reference any icon that's [bundled with the theme][icon search] with Jinja's
``` html
<span class="twemoji">
{% include ".icons/fontawesome/brands/twitter.svg" %}
{% include ".icons/fontawesome/brands/twitter.svg" %} <!-- (1)! -->
</span>
```
1. Enter a few keywords to find the perfect icon using our [icon search] and
click on the shortcode to copy it to your clipboard:
<div class="mdx-iconsearch" data-mdx-component="iconsearch">
<input class="md-input md-input--stretch mdx-iconsearch__input" placeholder="Search icon" data-mdx-component="iconsearch-query" value="brands twitter" />
<div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result" data-mdx-mode="file">
<div class="mdx-iconsearch-result__meta"></div>
<ol class="mdx-iconsearch-result__list"></ol>
</div>
</div>
This is exactly what Material for MkDocs does in its templates.
[extending the theme]: ../customization.md#extending-the-theme

12
docs/reference/index.md
View File

@@ -88,8 +88,16 @@ icon: material/emoticon-happy # (1)!
...
```
1. Check out the left sidebar to see icons in action! Also check out our
[icon search] to find the perfect icon with a few keystrokes.
1. Enter a few keywords to find the perfect icon using our [icon search] and
click on the shortcode to copy it to your clipboard:
<div class="mdx-iconsearch" data-mdx-component="iconsearch">
<input class="md-input md-input--stretch mdx-iconsearch__input" placeholder="Search icon" data-mdx-component="iconsearch-query" value="emoticon happy" />
<div class="mdx-iconsearch-result" data-mdx-component="iconsearch-result" data-mdx-mode="file">
<div class="mdx-iconsearch-result__meta"></div>
<ol class="mdx-iconsearch-result__list"></ol>
</div>
</div>
[Insiders]: ../insiders/index.md
[icon search]: icons-emojis.md#search