Material Icons Bundle

Material Design SVG icons as ES modules

Browse Icons

Visit Icon Browser featuring:

• Visually similar icons (using per pixel compare)
• Simple bundle (icon selection) copy/paste editor
• Various view, filtering and grouping options
• Large preview with various 24×24 grids and keyline blueprints (click preview to switch backgrounds)
• Full screen preview (press Esc to open/close)
• Hold Ctrl to compare with previously selected icon
• Instant search

Install

$ yarn add github:darosh/material-icons-bundle

Usage

export {
  signal_cellular_connected_no_internet_0_bar,
  keyboard_arrow_left,
  keyboard_arrow_right,
  keyboard_arrow_up
} from 'material-icons-bundle'

will produce object like:

{
  signal_cellular_connected_no_internet_0_bar: '<path fill-opacity=".3" d="M22 8V2L2 22h16V8z"></path>...',
  keyboard_arrow_left: 'M15.41 16.09l-4.58-4.59 4.58-4.59L14 5.5l-6 6 6 6z',
  ...
}

where most of values are <path> d attribute data. Some data starting with < are svg inner elements, such icons are tagged as multi-shape in the browser.

Icon aliases points to same *.js file for minimal build.

Tree-shaking rollup.js or webpack recommended.

Here is some real usage example (and previous re-exporting version using another icon package.)

Sources

• Google icons material.io/icons from google/material-design-icons
• Community icons materialdesignicons.com from Templarian/MaterialDesign-SVG and API

Sources are merged comparing rendered pixel with some additional auto tagging. See compare table for more information.

Metadata

Used by Icon Browser:

• meta.json
• similar.json

Poster generator

Leverages pixels and frame metadata in meta.json.

• online
• source

Development

Note: you may experience issues with installing material-design-icons package, it may be easier to download & unpack it manually

npm install --ignore-scripts
npm run install
yarn build
yarn export