3.2 KiB
template |
---|
overrides/main.html |
Icons + Emojis
One of the best features of Material for MkDocs is the possibility to use more
than 7.000 icons and thousands of emojis in your project documentation
with practically zero additional effort. Furthermore, custom icons can be used
in mkdocs.yml
, documents and templates.
Configuration
Emoji
:octicons-file-code-24: Source · :octicons-workflow-24: Extension
The Emoji extension, which is part of Python Markdown Extensions,
adds the ability to integrate emojis and icons in the *.svg
file format,
which are inlined when building your site:
markdown_extensions:
- pymdownx.emoji:
emoji_index: !!python/name:materialx.emoji.twemoji
emoji_generator: !!python/name:materialx.emoji.to_svg
The following icon sets are bundled with Material for MkDocs:
- :material-material-design: – Material Design
- :fontawesome-brands-font-awesome-flag: – FontAwesome
- :octicons-mark-github-16: – Octicons
You can also add additional icons. When using emojis, it's recommended to consult the official documentation of Python Markdown Extensions to learn about configuration options.
Usage
Using emojis
Emojis can be integrated in Markdown by putting the shortcode of the emoji between two colons. If you're using Twemoji (recommended), you can look up the shortcodes at Emojipedia.
Example:
:smile:
Result:
😄
Using icons
When Emoji is enabled, icons can be used similar to emojis, by referencing
a valid path to any icon bundled with the theme, which are located in the
.icons
directory, and replacing /
with -
:
Example:
* :material-account-circle: – `.icons/material/account-circle.svg`
* :fontawesome-regular-laugh-wink: – `.icons/fontawesome/regular/laugh-wink.svg`
* :octicons-octoface-16: – `.icons/octicons/octoface-16.svg`
Result:
-
:material-account-circle: –
.icons/material/account-circle.svg
-
:fontawesome-regular-laugh-wink: –
.icons/fontawesome/regular/laugh-wink.svg
-
:octicons-octoface-16: –
.icons/octicons/octoface-16.svg