Is there a plan to add material design inline icons?

[2bndy5]

I thought I'd ask this here since you're moving away from sphinx-panels - this is looking great BTW!

I see that there are inline icons for FontAwesome and Octicon. I'm helping develop a port of mkdocs-material theme to sphinx, and our docs could use the set of inline icons from the material design set.

For reference

1. This is the theme I'm helping: Its called sphinx-immaterial because there was a previous (kind of a "hobbyist" attempt) called sphinx-material.
2. This is the set of icons supported by all the material design docs themes (in svg form)

---

ps - If you're curious to see the sphinx-immaterial theme in action, it is hosted on gh-pages. I've also made sure it works rather well with RTD builds 😉 .

[welcome]

Thanks for opening your first issue here! Engagement like this is essential for open source projects! 🤗

If you haven't done so already, check out EBP's Code of Conduct. Also, please try to follow the issue template as it helps other community members to contribute more effectively.

If your issue is a feature request, others may react to it, to raise its prominence (see Feature Voting).

Welcome to the EBP community! 🎉

[chrisjsewell]

Heya! Thanks, the themes looking good 👌 I've been playing around making React sites with https://mui.com, so certainly appreciate the materials styling

Yeh, I guess if you could "compile" them into a similar JSON format to: https://github.com/executablebooks/sphinx-design/blob/main/sphinx_design/compiled/octicons.json?
Then it would be pretty easy to add

[2bndy5]

Well, I'm not sure where I'd get the keywords list from, and the material SVGs may only use 24x24 dimensions.
EDIT: For the keywords list, I'm using the categories' names that the material icons are organized by (SVG src folder seems to have been restructured in v4.0.0 of google/material-design-icons repo). Also, I found that some material icons come in 20px size while all icons come in 24px size.
Would this be a problem?

Otherwise, I could easily write a script that translates the SVGs from XML form into an aggregated JSON file.

[2bndy5]

ok I've put together a python script that "walks" the src folder (copied from google/material-design-icons repo) and dumps the SVG data into several JSON files. Each JSON file has a collection of icons specific to a material icon "theme" (regular, outlined, sharp, rounded, & twotone).

Attached is a zip of the src SVG files along with the compiled JSON files and the python script that generates the JSON files from the src SVG assets.
material-icons-to-json.zip

I've been considering making a repo to automate this task for any future updates to the google/material-design-icons repo, but I'd like to know if this approach works at all first. Hint: if you update the SVG assets in the src folder, then all you need to do is re-run the walk_svg_to_json.py script (which will update the JSON files in the compiled folder).

Additional Context

Some SVG assets use more than just a <path> tag (about 2100+ additionally use <g> and/or <rect> or <circle> tags).

Unlike the sample you linked to for the octicons.json, there are no closing </path>, </rect>, or </circle> tags. So, I used a regex substitution to insert the closing tag:

• <tag .../> becomes <tag ...></tag>.

[2bndy5]

Success

I managed to get this working! I had to update the json from the google/material-icons repo's latest commit. Some icons seem to have been added since the last release; these new icons show on the material design site's list of material icons, but they aren't included in the latest release assets 😕.

Here's a screenshot of the new roles being used in the sphinx-immaterial theme's docs

They also work seemlessly (without extra css from the theme's docs' build config) in the light theme

FYI: the source snippet for the above screenshots is

            Options must be `any of the icons bundled with this theme <https://github.com/squidfunk/mkdocs-material/tree/master/material/.icons>`_.
            Popular combinations are

            .. csv-table::

                :material-outlined:`toggle_off;1.5rem` ``material/toggle-switch-off-outline``, :material-regular:`toggle_on;1.5rem` ``material/toggle-switch``
                :material-outlined:`light_mode;1.5rem` ``material/weather-sunny``, :material-outlined:`dark_mode;1.5rem` ``material/weather-night``
                :material-outlined:`visibility;1.5rem` ``material/eye-outline``, :material-regular:`visibility;1.5rem` ``material/eye``
                :material-outlined:`lightbulb;1.5rem` ``material/lightbulb-outline``, :material-regular:`lightbulb;1.5rem` ``material/lightbulb``

PR coming shortly.

[chrisjsewell]

awesome 😄