Individual Asset Files

/**
 * PNG asset path pattern
 * @param category - Icon category (action, alert, av, etc.)
 * @param density - Screen density or platform target
 * @param iconName - Icon name without prefix
 * @param color - black or white
 * @param size - 18dp, 24dp, 36dp, or 48dp
 */
const pngPath = `${STATIC_PATH}/{category}/{density}/ic_{iconName}_{color}_{size}dp.png`;

interface DensityTypes {
  "1x_web": "Standard web density (1x)";
  "2x_web": "High-density web (2x)";  
  "drawable-hdpi": "Android high density (1.5x)";
  "drawable-mdpi": "Android medium density (1x)";
  "drawable-xhdpi": "Android extra high density (2x)";
  "drawable-xxhdpi": "Android extra extra high density (3x)";
  "drawable-xxxhdpi": "Android extra extra extra high density (4x)";
}

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

// Standard web icon
const webIcon = path.join(
  STATIC_PATH, 
  "action", 
  "1x_web", 
  "ic_home_black_24dp.png"
);

// High-density web icon
const retinaIcon = path.join(
  STATIC_PATH,
  "action", 
  "2x_web", 
  "ic_home_black_24dp.png"
);

// Android drawable
const androidIcon = path.join(
  STATIC_PATH,
  "action",
  "drawable-xhdpi", 
  "ic_home_black_24dp.png"
);

/**
 * SVG asset path pattern
 * @param category - Icon category
 * @param iconName - Icon name without prefix
 * @param size - 24px or 48px
 */
const svgPath = `${STATIC_PATH}/{category}/svg/production/ic_{iconName}_{size}px.svg`;

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

// 24px SVG icon
const svg24 = path.join(
  STATIC_PATH,
  "navigation", 
  "svg", 
  "production", 
  "ic_arrow_back_24px.svg"
);

// 48px SVG icon  
const svg48 = path.join(
  STATIC_PATH,
  "navigation",
  "svg", 
  "production", 
  "ic_arrow_back_48px.svg"
);

// Read SVG content
const fs = require("fs");
const svgContent = fs.readFileSync(svg24, "utf8");
console.log(svgContent); // Complete SVG markup

/**
 * iOS asset path pattern
 * iOS assets follow Apple's naming conventions with @1x, @2x, @3x suffixes
 */
const iosPath = `${STATIC_PATH}/{category}/ios/{filename}`;

interface iOSAssetSizes {
  "@1x": "Standard density";
  "@2x": "Retina density"; 
  "@3x": "Retina HD density";
}

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

// List all iOS assets for a category
const iosDir = path.join(STATIC_PATH, "action", "ios");
const iosAssets = fs.readdirSync(iosDir);

// Filter for specific icon
const homeIcons = iosAssets.filter(filename => 
  filename.includes("home") && filename.endsWith(".png")
);

console.log(homeIcons);
// Output: ["ic_home_black_1x_ios.png", "ic_home_black_2x_ios.png", ...]

/**
 * Android vector drawable path pattern
 * Available for Android API level 21 and above
 */
const vectorPath = `${STATIC_PATH}/{category}/drawable-anydpi-v21/{filename}.xml`;

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

// Android vector drawable
const vectorDrawable = path.join(
  STATIC_PATH,
  "action",
  "drawable-anydpi-v21", 
  "ic_home_black_24dp.xml"
);

// Read vector drawable XML
if (fs.existsSync(vectorDrawable)) {
  const xmlContent = fs.readFileSync(vectorDrawable, "utf8");
  console.log(xmlContent); // Vector drawable XML
}

material-design-icons/
├── action/
│   ├── 1x_web/           # Standard web PNGs
│   ├── 2x_web/           # High-density web PNGs  
│   ├── drawable-hdpi/    # Android hdpi (1.5x)
│   ├── drawable-mdpi/    # Android mdpi (1x)
│   ├── drawable-xhdpi/   # Android xhdpi (2x)
│   ├── drawable-xxhdpi/  # Android xxhdpi (3x)
│   ├── drawable-xxxhdpi/ # Android xxxhdpi (4x)
│   ├── drawable-anydpi-v21/ # Android vector drawables
│   ├── ios/             # iOS optimized PNGs
│   └── svg/
│       └── production/  # SVG files
├── alert/               # Same structure for each category
├── av/
└── ...                  # 16 total categories

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

function MaterialIcon({ category, name, size = 24, color = "black", format = "svg" }) {
  let iconPath;
  
  if (format === "svg") {
    iconPath = path.join(STATIC_PATH, category, "svg", "production", `ic_${name}_${size}px.svg`);
  } else if (format === "png") {
    iconPath = path.join(STATIC_PATH, category, "1x_web", `ic_${name}_${color}_${size}dp.png`);
  }
  
  return format === "svg" ? (
    <svg width={size} height={size}>
      <use xlinkHref={`${iconPath}#icon`} />
    </svg>
  ) : (
    <img src={iconPath} alt={name} width={size} height={size} />
  );
}

// Usage
<MaterialIcon category="action" name="home" size={24} />

// webpack.config.js
const { STATIC_PATH } = require("material-design-icons");

module.exports = {
  module: {
    rules: [
      {
        test: /\.svg$/,
        include: path.join(STATIC_PATH),
        use: ["@svgr/webpack", "url-loader"]
      }
    ]
  }
};

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

// Copy only needed icons to reduce bundle size
const iconsNeeded = [
  { category: "action", name: "home", sizes: [24, 48] },
  { category: "navigation", name: "menu", sizes: [24] }
];

iconsNeeded.forEach(({ category, name, sizes }) => {
  sizes.forEach(size => {
    const svgPath = path.join(
      STATIC_PATH, 
      category, 
      "svg", 
      "production", 
      `ic_${name}_${size}px.svg`
    );
    
    const destPath = path.join("./dist/icons", `${name}_${size}.svg`);
    fs.copyFileSync(svgPath, destPath);
  });
});