templarian/materialdesign

★ 11,273Audience · developerComplexity · 1/5Setup · easy

Mindmap

mindmap
  root((MDI))
    What it is
      7000 plus icons
      Material Design style
    Distribution
      npm webfont SCSS
      React components
      Raw SVG package
    Use cases
      Web apps
      CSS projects
      Design tools
    Contributing
      Pictogrammers site
      Issue tracker here

mindmap root((MDI)) What it is 7000 plus icons Material Design style Distribution npm webfont SCSS React components Raw SVG package Use cases Web apps CSS projects Design tools Contributing Pictogrammers site Issue tracker here

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add Material Design icons to a React app by installing the dedicated npm component package.

USE CASE 2

Use the SCSS and webfont package to include icons in a traditional CSS-based website.

USE CASE 3

Download the raw SVG package to use icon files directly in design tools or custom rendering pipelines.

Tech stack

npmSCSSTypeScriptReactSVG

Getting it running

Difficulty · easy Time to first run · 5min

Icon files are in separate npm packages, not this repository, install from npm rather than cloning this repo.

In plain English

This repository is the planning and tracking hub for Material Design Icons, a collection of more than 7,000 icons maintained by the community. The icons follow Google's Material Design visual style and include both community-contributed originals and converted versions of Google's official icon set. The actual icon files are distributed through separate repositories and npm packages, not from this one directly. If you want to use these icons in a project, you install them from npm rather than cloning this repository. There are four main packages depending on what your project needs: a webfont and SCSS package for traditional CSS-based projects, a JavaScript and TypeScript package with the icon data as named exports, a React component package, and a raw SVG package with metadata. A desktop font version is also available without an npm package. This repository serves as the place where icon suggestions and planning happen. New icon requests are submitted through the GitHub Issues tab, with examples attached. The icons themselves are managed through the Pictogrammers website by a team of contributors, and changes sync from there. Pull requests against this repository are not accepted, contributions go through the Pictogrammers contributor process instead. For developers upgrading from an older version of the icon set, the README links to an upgrade guide and changelog. There is also a known issue specific to Cordova apps where a version query string in the CSS file must be removed manually. The license file is linked in the README but its terms are not reproduced there directly.

Copy-paste prompts

Prompt 1

I'm building a React app and want to use Material Design Icons. Show me how to install the npm package and render an icon component.

Prompt 2

How do I use Material Design Icons with a webfont in a plain HTML and CSS project without npm?

Prompt 3

I need to use Material Design Icons in a TypeScript project. How do I import named icon exports from the JS/TS package?

Prompt 4

I'm upgrading my project from an older version of Material Design Icons. Where is the upgrade guide and what breaking changes should I watch for?

Open on GitHub → Explain another repo

← templarian on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.