This plugin allows you to easily add Material Icons to your Docsify-powered documentation.
Syntax inspired by https://github.com/erickjx/docsify-material-icons/
- Easily insert Material Icons into your Markdown files
- Support for basic, outlined, and other icon types
- Color customization using named colors, hex codes, or RGB values
- Inline CSS application for colors
- Error handling for invalid color inputs
- Lightweight and efficient
-
Add the following script tag to your
index.html
file, after the Docsify script:<script src="https://cdn.jsdelivr.net/gh/nicoveraz/material-icons-docsify@main/material-icons-docsify.js"></script>
-
Include the Material Icons font in your
index.html
:<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
That's it! You don't need to download or host the plugin file yourself.
You can use either inline syntax or comment-based syntax to add Material Icons to your Markdown files.
Use the following syntax directly in your Markdown:
:mi icon_name:
:mi-outlined icon_name:
:mi color_name icon_name:
:mi #hex_color icon_name:
:mi rgb(r,g,b) icon_name:
:mi-outlined color_name icon_name:
- Basic icon:
:mi home:
- Outlined icon:
:mi-outlined home:
- Colored icon (named color):
:mi blue home:
- Colored icon (hex color):
:mi #FF5733 favorite:
- Colored icon (RGB):
:mi rgb(255,87,51) star:
- Full syntax with color:
:mi-outlined red account_circle:
The plugin supports the following color formats:
- Named colors (e.g.,
red
,blue
,green
) - Hexadecimal color codes (e.g.,
#FF5733
) - RGB values (e.g.,
rgb(255,87,51)
)
If an invalid color is provided, the plugin will use the default color and log a warning to the console.
The plugin includes error handling for invalid color inputs. If an invalid color is specified, the icon will still be rendered using the default color, and a warning will be logged to the console.
Contributions are welcome! Please feel free to submit a Pull Request.
This project is licensed under the MIT License - see the LICENSE file for details.