Material Design Icons

Material Design Icons is Google's official icon collection providing 932 unique Material Design icons across 16 categories. The package offers multiple consumption methods including web fonts, individual asset files, sprite sheets, and programmatic access to asset paths.

Package Information

• Package Name: material-design-icons
• Package Type: npm
• Language: JavaScript
• Installation: npm install material-design-icons
• License: Apache-2.0

Core Imports

const { STATIC_PATH } = require("material-design-icons");

For ES modules:

import { STATIC_PATH } from "material-design-icons";

Basic Usage

const { STATIC_PATH } = require("material-design-icons");
const path = require("path");

// Access icon file paths programmatically
const actionIconPath = path.join(STATIC_PATH, "action", "svg", "production", "ic_3d_rotation_24px.svg");
const fontPath = path.join(STATIC_PATH, "iconfont", "MaterialIcons-Regular.woff2");

console.log(actionIconPath);
console.log(fontPath);

For web applications using CDN:

<!-- Web font integration -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<i class="material-icons">3d_rotation</i>

Architecture

Material Design Icons is structured as an asset collection with multiple access patterns:

• Node.js API: Simple constant export providing package directory path
• Asset Organization: Icons categorized into 16 thematic groups
• Multi-Format Support: PNG (multiple densities), SVG, web fonts, sprites
• Build System: Gulp-based sprite generation and optimization tools
• Cross-Platform: iOS, Android, web, and desktop application support

Icon Categories

The collection includes 932 icons organized into these categories:

• action: User interaction icons (3d_rotation, accessibility, account_balance, etc.)
• alert: Alert and notification icons (add_alert, error, warning, etc.)
• av: Audio/video and media icons (play_arrow, pause, volume_up, etc.)
• communication: Communication icons (call, email, message, etc.)
• content: Content editing icons (add, clear, copy, etc.)
• device: Device and hardware icons (battery, bluetooth, wifi, etc.)
• editor: Text editing icons (format_bold, format_italic, insert_link, etc.)
• file: File operations icons (attachment, cloud, folder, etc.)
• hardware: Hardware icons (computer, keyboard, mouse, etc.)
• image: Image editing icons (brightness, crop, photo, etc.)
• maps: Maps and location icons (directions, location_on, map, etc.)
• navigation: Navigation icons (arrow_back, menu, close, etc.)
• notification: Notification icons (notifications, do_not_disturb, etc.)
• places: Places icons (business, home, restaurant, etc.)
• social: Social icons (group, person, share, etc.)
• toggle: Toggle and selection icons (check_box, radio_button, star, etc.)

Capabilities

Node.js API

Programmatic access to the package directory for building custom asset paths.

/**
 * Path to the package directory containing all icon assets
 */
const STATIC_PATH: string;

Node.js API

Web Font Integration

Use Material Design Icons as web fonts for easy integration in web applications.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
}

Web Font Integration

Individual Asset Files

Access individual icon files in PNG, SVG, and platform-specific formats.

// Asset path patterns
const pngPath = `${STATIC_PATH}/{category}/{density}/{filename}`;
const svgPath = `${STATIC_PATH}/{category}/svg/production/{filename}`;
const iosPath = `${STATIC_PATH}/{category}/ios/{filename}`;

Individual Assets

Sprite Sheets

Pre-generated CSS and SVG sprite sheets for optimized web delivery.

<!-- CSS sprite usage -->
<link href="sprite-{category}-{color}.css" rel="stylesheet">
<div class="icon icon-ic_{icon_name}_{color}_{size}dp"></div>

<!-- SVG symbol sprite usage -->
<svg><use xlink:href="sprite.svg#ic_{icon_name}_24px"></use></svg>

Sprite Sheets

Build System

Gulp-based build tools for generating custom sprites and optimizing assets.

// Available Gulp tasks
gulp.task('png-sprites');  // Generate PNG sprite sheets
gulp.task('svg-sprites');  // Generate SVG sprite sheets and symbols
gulp.task('iconjar');      // Generate IconJar integration file
gulp.task('default');      // Run all sprite generation tasks

Build System