Skip to content

Commit

Permalink
✨ NEW: Add material design icons roles (#41)
Browse files Browse the repository at this point in the history
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]>
  • Loading branch information
2bndy5 and chrisjsewell authored Dec 16, 2021
1 parent 63754db commit 4a1a875
Show file tree
Hide file tree
Showing 17 changed files with 131,785 additions and 8 deletions.
6 changes: 6 additions & 0 deletions MANIFEST.in
Original file line number Diff line number Diff line change
Expand Up @@ -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
36 changes: 34 additions & 2 deletions docs/badges_buttons.md
Original file line number Diff line number Diff line change
Expand Up @@ -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}
Expand All @@ -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.:

Expand Down
7 changes: 7 additions & 0 deletions docs/snippets/myst/icon-material-design.txt
Original file line number Diff line number Diff line change
@@ -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.
7 changes: 7 additions & 0 deletions docs/snippets/rst/icon-material-design.txt
Original file line number Diff line number Diff line change
@@ -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.
4 changes: 2 additions & 2 deletions setup.cfg
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
13 changes: 13 additions & 0 deletions sphinx_design/compiled/material-icons_LICENSE
Original file line number Diff line number Diff line change
@@ -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.
Loading

0 comments on commit 4a1a875

Please sign in to comment.