CtrlK
BlogDocsLog inGet started
Tessl Logo

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

SecuritybySnyk

Pending

The risk profile of this skill

Overview
Eval results
Files

sprites.mddocs/

Sprite Sheets

Material Design Icons provides pre-generated CSS and SVG sprite sheets for optimized web delivery. Sprites reduce HTTP requests and improve loading performance.

Capabilities

CSS Sprite Sheets

Pre-generated PNG sprite sheets with accompanying CSS for each category and color combination.

/**
 * CSS sprite integration pattern
 * Include category-specific CSS file and use icon classes
 */
@import url("sprite-{category}-{color}.css");

.icon {
  display: inline-block;
  background-repeat: no-repeat;
}

.icon-ic_{icon_name}_{color}_{size}dp {
  background-position: /* Generated by sprite CSS */;
  width: {size}px;
  height: {size}px;
}

Usage Examples:

<!-- Include sprite CSS -->
<link href="sprites/css-sprite/sprite-action-black.css" rel="stylesheet">

<!-- Use sprite icons -->
<div class="icon icon-ic_home_black_24dp"></div>
<div class="icon icon-ic_search_black_24dp"></div>
<div class="icon icon-ic_menu_black_24dp"></div>

SVG Sprite Sheets

Vector-based sprite sheets with CSS positioning for crisp display at any size.

/**
 * SVG sprite CSS integration
 * Requires both CSS file and dimension classes
 */
@import url("svg-sprite-{category}.css"); 

.svg-{icon_name}-dims {
  width: {size}px;
  height: {size}px;
}

Usage Examples:

<!-- Include SVG sprite CSS -->
<link href="sprites/svg-sprite/svg-sprite-action.css" rel="stylesheet">

<!-- Define icon dimensions -->
<style>
  .svg-ic_home_black_24dp-dims { width: 24px; height: 24px; }
</style>

<!-- Use SVG sprite icons -->
<div class="svg-ic_home_black_24dp svg-ic_home_black_24dp-dims"></div>

SVG Symbol Sprites

Modern SVG symbol sprites using <use> element for flexible icon integration.

/**
 * SVG symbol sprite integration
 * Most flexible and recommended approach for modern browsers
 */
<svg class="icon">
  <use xlink:href="sprite-{category}-symbol.svg#ic_{icon_name}_{size}px"></use>
</svg>

Usage Examples:

<!-- Basic symbol sprite usage -->
<svg class="icon-24">
  <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_home_24px"></use>
</svg>

<!-- With CSS sizing -->
<style>
  .icon-24 { width: 24px; height: 24px; }
  .icon-48 { width: 48px; height: 48px; }
</style>

<svg class="icon-24">
  <use xlink:href="sprites/svg-sprite/svg-sprite-navigation-symbol.svg#ic_menu_24px"></use>
</svg>
<svg class="icon-48">
  <use xlink:href="sprites/svg-sprite/svg-sprite-action-symbol.svg#ic_search_24px"></use>
</svg>

Generated Sprite Files

The build system generates multiple sprite formats for each category:

interface SpriteFiles {
  // CSS sprites (PNG-based)
  cssSprites: {
    image: `sprite-{category}-{color}.png`;
    css: `sprite-{category}-{color}.css`;
  };
  
  // SVG sprites (vector-based)
  svgSprites: {
    sprite: `svg-sprite-{category}.svg`;
    css: `svg-sprite-{category}.css`;  
    example: `svg-sprite-{category}.html`;
  };
  
  // SVG symbol sprites (recommended)
  svgSymbols: {
    sprite: `svg-sprite-{category}-symbol.svg`;
    example: `svg-sprite-{category}-symbol.html`;
  };
}

Advanced Usage Patterns

Stacking Symbol Sprites

Combine multiple icons in a single SVG element for complex graphics.

<!-- Stacked icons for complex UI elements -->
<svg class="stacked-icon">
  <use class="background" xlink:href="sprite-toggle-symbol.svg#ic_check_box_outline_blank_24px"></use>
  <use class="foreground" xlink:href="sprite-toggle-symbol.svg#ic_check_24px"></use>
</svg>

Usage Examples:

<style>
  .stacked-icon {
    width: 24px;
    height: 24px;
  }
  
  .stacked-icon .background {
    fill: #ccc;
  }
  
  .stacked-icon .foreground {
    fill: #007bff;
    opacity: 0; /* Hidden by default */
    transition: opacity 0.2s;
  }
  
  .stacked-icon:hover .foreground {
    opacity: 1; /* Show on hover */
  }
</style>

<!-- Checkbox with hover effect -->
<svg class="stacked-icon" id="checkbox-1">
  <use class="background" xlink:href="sprites/svg-sprite/svg-sprite-toggle-symbol.svg#ic_check_box_outline_blank_24px"></use>
  <use class="foreground" xlink:href="sprites/svg-sprite/svg-sprite-toggle-symbol.svg#ic_check_24px"></use>
</svg>

External SVG Symbol Files

Reference external symbol files for better caching across pages.

<!-- External symbol reference (requires polyfill for IE/Edge) -->
<svg class="icon">
  <use xlink:href="/path/to/sprites/svg-sprite-action-symbol.svg#ic_home_24px"></use>
</svg>

Usage Examples:

<!-- Include svg4everybody polyfill for IE/Edge support -->
<script src="https://cdn.jsdelivr.net/npm/svg4everybody@2.1.9/dist/svg4everybody.min.js"></script>
<script>svg4everybody();</script>

<!-- External symbol sprites work across all browsers -->
<svg class="nav-icon">
  <use xlink:href="/sprites/svg-sprite-navigation-symbol.svg#ic_menu_24px"></use>
</svg>
<svg class="action-icon">
  <use xlink:href="/sprites/svg-sprite-action-symbol.svg#ic_search_24px"></use>
</svg>

Build-Time Integration

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

// Copy sprite files to build directory
const spriteFiles = [
  "sprites/svg-sprite/svg-sprite-action-symbol.svg",
  "sprites/svg-sprite/svg-sprite-navigation-symbol.svg",
  "sprites/css-sprite/sprite-action-black.css",
  "sprites/css-sprite/sprite-action-black.png"
];

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

Browser Compatibility

CSS Sprites

  • Support: All browsers including IE6+
  • Benefits: Maximum compatibility, single HTTP request per category
  • Drawbacks: Fixed resolution, larger file sizes

SVG Sprites

  • Support: IE9+, all modern browsers
  • Benefits: Vector scaling, smaller file sizes
  • Drawbacks: More complex CSS setup

SVG Symbol Sprites

  • Support: IE9+ (with polyfill), all modern browsers
  • Benefits: Most flexible, best performance, infinite scalability
  • Drawbacks: External file references need polyfill for IE/Edge

Performance Considerations

Sprite Selection Guidelines

/**
 * Choose sprite format based on usage patterns
 */
interface SpriteRecommendations {
  "few_icons": "Individual SVG files"; 
  "many_icons_same_category": "Category sprite sheet";
  "many_icons_mixed_categories": "Combined custom sprite";
  "maximum_browser_support": "CSS sprites (PNG)";
  "modern_browsers_only": "SVG symbol sprites";
}

Optimization Tips

  1. CSS Sprites: Best for legacy browser support, use for high-traffic sites
  2. SVG Symbols: Recommended for modern applications, best balance of flexibility and performance
  3. Category-specific: Only load sprites for categories you actually use
  4. Custom builds: Generate custom sprites with only needed icons using the build system

docs

build-system.md

index.md

individual-assets.md

nodejs-api.md

sprites.md

web-fonts.md

tile.json