Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Upgrade Material Design icons to latest version

See original GitHub issue

Description

When using the option of icon under the theme, certain material icons will either not show at all, or will show with incorrect padding.

Expected behavior

Nav Icon to be replaced with another Material Icon, using the same padding as the default icon.

Actual behavior

Will either not show the icon, incorrectly pad the icon, or both.

Steps to reproduce the bug

adjust mkdocs.yml to use

theme:
  name: material
  logo:
    icon: bar_chart

run mkdocs serve
preview site in browser

Package versions

Python: 3.7.3
MkDocs: 1.0.4
Material: 4.4.0

Project configuration

The contents of your mkdocs.yml

System information

OS: Windows 10 Pro x64
Browser: Chrome, Firefox Developer Edition

Issue Analytics

State:
Created 4 years ago
Comments:5 (5 by maintainers)

Top GitHub Comments

1reaction

squidfunkcommented, Mar 10, 2020

Material for MkDocs 5.0.0rc1 is out which fixes this issue 😀 Let’s test and improve it together!

1reaction

squidfunkcommented, Feb 23, 2020

I have good news! As the original repository hasn’t been updated, I searched for another way of grabbing the latest icons from material.io and found an npm package that seems to download the SVG versions automatically from their site. While the web font seems to contain around 400 icons, the SVG icon set contains a whopping 3.8k icons! I started inlining the icons as SVGs and it works like a charm. They will all be bundled with the next version of Material. Including the FontAwesome icon set the theme will contain 5.3k icons!

Regarding the license - material.io states that the icons are all available under Apache license which is compatible with MIT which Material is using, so there should be no problem.

Top Results From Across the Web

material-design-icons - npm

Material Design icons by Google. Latest version: 3.0.1, last published: 6 years ago. Start using material-design-icons in your project by ...

Updating Material Design Icons npm package [central issue]

This document proposes a way to automatically publish the Material Design icons as an npm package. Current version is 3.0.1 (https://www.npmjs.

Resources - Material Design

Explore and download Material icons in five styles and a range of sizes on Google ... Learn how to use Material Design's new...

Material Design Icons

View all the Material Design icons and more from the community. ... Need some icons? Have a look below. The orange icons are...

Material Icons Guide | Google Fonts

Material design system icons are simple, modern, friendly, and sometimes quirky. Each icon is created using our design guidelines to depict in simple...