✨ NEW: Add material design icons roles (#41)

This commit adds 5 new roles,
 for using Google's Material Design Icons as inline text.
Each role represents a different material design "flavor":

- `material-regular`
- `material-outlined`
- `material-sharp`
- `material-round`
- `material-twotone`

Co-authored-by: Chris Sewell <[email protected]>

Author: 2bndy5

MANIFEST.in

@@ -22,3 +22,9 @@ include sphinx_design/compiled/style.min.css
 include sphinx_design/compiled/sd_tabs.js
 include sphinx_design/compiled/octicon_LICENSE
 include sphinx_design/compiled/octicons.json
+include sphinx_design/compiled/material_outlined.json
+include sphinx_design/compiled/material_regular.json
+include sphinx_design/compiled/material_round.json
+include sphinx_design/compiled/material_sharp.json
+include sphinx_design/compiled/material_twotone.json
+include sphinx_design/compiled/material-icons_LICENSE

docs/badges_buttons.md

@@ -175,14 +175,16 @@ class
 
 ## Inline Icons
 
-Inline icon roles are available for both the [GitHub octicon](https://primer.style/octicons/) or [FontAwesome](https://fontawesome.com/icons?d=gallery&m=free) libraries.
+Inline icon roles are available for the [GitHub octicon](https://primer.style/octicons/), [Google Material Design Icons](https://github.com/google/material-design-icons), or [FontAwesome](https://fontawesome.com/icons?d=gallery&m=free) libraries.
 
-Octicon icons are added as SVG's directly into the page with the `octicon` role.
+Octicon icons and Material icons are added as SVG's directly into the page with the `octicon` and `material-<flavor>` roles. See below for the different flavors of Material Design Icons.
 
 By default the icon will be of height `1em` (i.e. the height of the font).
 A specific height can be set after a semi-colon (`;`) with units of either `px`, `em` or `rem`.
 Additional CSS classes can also be added to the SVG after a second semi-colon (`;`) delimiter.
 
+### Octicon Icons
+
 A coloured icon: {octicon}`report;1em;sd-text-info`, some more text.
 
 ````{tab-set-code}
@@ -201,6 +203,36 @@ A coloured icon: {octicon}`report;1em;sd-text-info`, some more text.
 ```
 ````
 
+### Material Design Icons
+
+Material Design icons come as several flavors. Each flavor represents a different role used in sphinx-design. These flavors are:
+
+- `material-regular`
+- `material-outlined`
+- `material-round`
+- `material-sharp`
+- `material-twotone`
+
+Not all icons are available for each flavor, but most are. Instead of displaying the 10660+ icons here, you are encouraged to browse the available icons from the [Material Design Icons' showcase](https://fonts.google.com/icons) hosted by Google.
+
+- A regular icon: {material-regular}`data_exploration;2em`, some more text
+- A coloured regular icon: {material-regular}`settings;3em;sd-text-success`, some more text.
+- A coloured outline icon: {material-outlined}`settings;3em;sd-text-success`, some more text.
+- A coloured sharp icon: {material-sharp}`settings;3em;sd-text-success`, some more text.
+- A coloured round icon: {material-round}`settings;3em;sd-text-success`, some more text.
+- A coloured two-tone icon: {material-twotone}`settings;3em;sd-text-success`, some more text.
+
+````{tab-set-code}
+```{literalinclude} ./snippets/myst/icon-material-design.txt
+:language: markdown
+```
+```{literalinclude} ./snippets/rst/icon-material-design.txt
+:language: rst
+```
+````
+
+### FontAwesome Icons
+
 FontAwesome icons are added via the Fontawesome CSS classes.
 If the theme you are using does not already include the FontAwesome CSS, it should be loaded in your configuration from a [font-awesome CDN](https://cdnjs.com/libraries/font-awesome), with the [html_css_files](https://www.sphinx-doc.org/en/master/usage/configuration.html#confval-html_css_files) option, e.g.:
 

docs/snippets/myst/icon-material-design.txt

@@ -0,0 +1,7 @@
+- A regular icon: {material-regular}`data_exploration;2em`, some more text
+- A coloured regular icon: {material-regular}`settings;3em;sd-text-success`, some more text.
+- A coloured outline icon: {material-outlined}`settings;3em;sd-text-success`, some more text.
+- A coloured sharp icon: {material-sharp}`settings;3em;sd-text-success`, some more text.
+- A coloured round icon: {material-round}`settings;3em;sd-text-success`, some more text.
+- A coloured two-tone icon: {material-twotone}`settings;3em;sd-text-success`, some more text.
+- A fixed size icon: {material-regular}`data_exploration;24px`, some more text.

docs/snippets/rst/icon-material-design.txt

@@ -0,0 +1,7 @@
+- A regular icon: :material-regular:`data_exploration;2em`, some more text
+- A coloured regular icon: :material-regular:`settings;3em;sd-text-success`, some more text.
+- A coloured outline icon: :material-outlined:`settings;3em;sd-text-success`, some more text.
+- A coloured sharp icon: :material-sharp:`settings;3em;sd-text-success`, some more text.
+- A coloured round icon: :material-round:`settings;3em;sd-text-success`, some more text.
+- A coloured two-tone icon: :material-twotone:`settings;3em;sd-text-success`, some more text.
+- A fixed size icon: :material-regular:`data_exploration;24px`, some more text.

setup.cfg

@@ -44,9 +44,9 @@ exclude =
 code_style =
     pre-commit~=2.12
 rtd =
-    myst-parser~=0.15.0
+    myst-parser~=0.16.0
 testing =
-    myst-parser~=0.15.0
+    myst-parser~=0.16.0
     pytest~=6.2
     pytest-cov
     pytest-regressions

sphinx_design/compiled/material-icons_LICENSE

@@ -0,0 +1,13 @@
+Copyright 2021 Google
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.