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

Web Font Integration

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

Material Design Icons provides pre-built web fonts for easy integration in web applications. Icons can be used as font characters with CSS classes or accessed via Google Fonts CDN.

Capabilities

Google Fonts CDN Integration

The simplest way to use Material Design Icons in web applications.

<!-- Include Google Fonts CDN link in HTML head -->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

<!-- Use icons with CSS class -->
<i class="material-icons">icon_name</i>

Usage Examples:

<!DOCTYPE html>
<html>
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
</head>
<body>
  <!-- Basic icon usage -->
  <i class="material-icons">home</i>
  <i class="material-icons">menu</i>
  <i class="material-icons">search</i>
  
  <!-- Icons in buttons -->
  <button><i class="material-icons">add</i> Add Item</button>
  
  <!-- Styled icons -->
  <i class="material-icons" style="font-size: 48px; color: blue;">favorite</i>
</body>
</html>

Local Font Files

Use the included font files for offline applications or custom hosting.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
}

Usage Examples:

/* Custom icon sizes */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Custom colors */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-light { color: rgba(255, 255, 255, 1); }

/* Usage in HTML */

<i class="material-icons md-48">cloud</i>
<i class="material-icons md-dark">face</i>
<i class="material-icons md-light">account_circle</i>

Font File Formats

The package includes multiple font formats for broad browser compatibility:

interface FontFiles {
  eot: "MaterialIcons-Regular.eot";      // IE6-8 support
  svg: "MaterialIcons-Regular.svg";      // Legacy iOS support  
  ttf: "MaterialIcons-Regular.ttf";      // Desktop fonts
  woff: "MaterialIcons-Regular.woff";    // Web fonts
  woff2: "MaterialIcons-Regular.woff2";  // Modern web fonts (smallest)
}

Icon Codepoints

Maps icon names to Unicode codepoints for programmatic access.

/**
 * Icon name to Unicode codepoint mapping
 * Format: "icon_name codepoint"
 * Example: "3d_rotation e84d"
 */
interface CodepointMap {
  [iconName: string]: string; // Unicode codepoint in hex
}

Usage Examples:

// Read codepoints file programmatically
const fs = require('fs');
const { STATIC_PATH } = require('material-design-icons');
const path = require('path');

const codepointsPath = path.join(STATIC_PATH, 'iconfont', 'codepoints');
const codepoints = fs.readFileSync(codepointsPath, 'utf8')
  .split('\n')
  .filter(line => line.trim())
  .reduce((map, line) => {
    const [name, code] = line.split(' ');
    map[name] = String.fromCharCode(parseInt(code, 16));
    return map;
  }, {});

console.log(codepoints['3d_rotation']); // Returns Unicode character

CSS Integration Patterns

/* Button with icon */
.btn-with-icon {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-with-icon .material-icons {
  font-size: 18px;
}

/* Icon-only button */
.icon-button {
  border: none;
  background: none;
  padding: 8px;
  border-radius: 4px;
  cursor: pointer;
}

.icon-button .material-icons {
  font-size: 24px;
  color: #666;
}

.icon-button:hover .material-icons {
  color: #000;
}

<!-- Button with icon and text -->
<button class="btn-with-icon">
  <i class="material-icons">add</i>
  Add Item
</button>

<!-- Icon-only button -->
<button class="icon-button">
  <i class="material-icons">menu</i>
</button>