tessl/npm-material-design-icons

Google's official Material Design icon collection providing 932 icons in multiple formats

—

Pending

Quality

Pending

Does it follow best practices?

Impact

Pending

No eval scenarios have been run

Securityby

Pending

The risk profile of this skill

Overview

Eval results

Files

Node.js API

Name: tessl/npm-material-design-icons
Author: tessl

The Material Design Icons package provides a simple Node.js API for programmatic access to asset file paths.

Capabilities

STATIC_PATH Constant

Provides the absolute path to the package directory containing all icon assets.

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

Usage Examples:

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

// Build path to a specific PNG icon
const iconPath = path.join(
  STATIC_PATH, 
  "action", 
  "1x_web", 
  "ic_3d_rotation_black_24dp.png"
);

// Build path to SVG icon
const svgPath = path.join(
  STATIC_PATH,
  "navigation", 
  "svg", 
  "production", 
  "ic_arrow_back_24px.svg"
);

// Build path to web font
const fontPath = path.join(
  STATIC_PATH,
  "iconfont",
  "MaterialIcons-Regular.woff2"
);

console.log("Icon path:", iconPath);
console.log("SVG path:", svgPath);
console.log("Font path:", fontPath);

File Structure Patterns

The package follows consistent directory patterns for all asset types:

PNG Assets

${STATIC_PATH}/{category}/{density}/{filename}

Where:

{category} is one of: action, alert, av, communication, content, device, editor, file, hardware, image, maps, navigation, notification, places, social, toggle
{density} is one of: 1x_web, 2x_web, drawable-hdpi, drawable-mdpi, drawable-xhdpi, drawable-xxhdpi, drawable-xxxhdpi
{filename} follows pattern: ic_{icon_name}_{color}_{size}dp.png

SVG Assets

${STATIC_PATH}/{category}/svg/production/ic_{icon_name}_{size}px.svg

iOS Assets

${STATIC_PATH}/{category}/ios/{filename}

Web Fonts

${STATIC_PATH}/iconfont/MaterialIcons-Regular.{ext}

Where {ext} is one of: eot, svg, ttf, woff, woff2

Integration Examples

Express.js Static Serving

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

// Serve Material Design Icons assets
app.use("/icons", express.static(STATIC_PATH));

// Now icons are available at:
// /icons/action/1x_web/ic_3d_rotation_black_24dp.png
// /icons/iconfont/MaterialIcons-Regular.woff2

Webpack Asset Resolution

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

module.exports = {
  resolve: {
    alias: {
      "material-icons": STATIC_PATH
    }
  }
};

// In your code:
// import iconUrl from "material-icons/action/svg/production/ic_home_24px.svg";

Build Tool Integration

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

// Copy specific icons to build directory
const iconsNeeded = [
  "action/svg/production/ic_home_24px.svg",
  "navigation/svg/production/ic_menu_24px.svg"
];

iconsNeeded.forEach(iconPath => {
  const src = path.join(STATIC_PATH, iconPath);
  const dest = path.join("./build/icons", path.basename(iconPath));
  fs.copyFileSync(src, dest);
});