CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-material-icons

Latest icon fonts and CSS for self-hosting material design icons.

—

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

Material Icons

Material Icons provides icon fonts and CSS for self-hosting Google's Material Design Icons, offering developers a comprehensive solution for incorporating Material Design iconography into web applications without relying on external CDNs. It includes multiple icon variants (filled, outlined, round, sharp, two-tone) in both font ligature and CSS class formats, with WOFF/WOFF2 font files for cross-browser compatibility and Sass variables for customization.

Package Information

  • Package Name: material-icons
  • Package Type: npm
  • Language: CSS/Sass with TypeScript definitions
  • Installation: npm install material-icons@latest

Core Imports

CSS import in JavaScript/TypeScript:

import 'material-icons/iconfont/material-icons.css';

CSS import in stylesheets:

@import 'material-icons/iconfont/material-icons.css';

Sass import:

@import 'material-icons/iconfont/material-icons.scss';

TypeScript definitions:

import { MaterialIcon } from 'material-icons';

Basic Usage

<!-- Icon font ligatures (recommended) -->
<span class="material-icons">pie_chart</span>
<span class="material-icons-outlined">home</span>
<span class="material-icons-round">search</span>
<span class="material-icons-sharp">add</span>
<span class="material-icons-two-tone">settings</span>

<!-- CSS classes alternative -->
<span class="material-icons mi-pie-chart"></span>
<span class="material-icons-outlined mi-home"></span>

<!-- Angular Material integration -->
<mat-icon>pie_chart</mat-icon>
<mat-icon fontSet="material-icons-outlined">home</mat-icon>
<mat-icon fontIcon="mi-pie-chart"></mat-icon>

Capabilities

Icon Font CSS Classes

CSS classes for displaying Material Design Icons using font ligatures.

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

.material-icons-outlined {
  font-family: "Material Icons Outlined";
  /* Same properties as above */
}

.material-icons-round {
  font-family: "Material Icons Round";
  /* Same properties as above */
}

.material-icons-sharp {
  font-family: "Material Icons Sharp";
  /* Same properties as above */
}

.material-icons-two-tone {
  font-family: "Material Icons Two Tone";
  /* Same properties as above */
}

Usage Examples:

<!-- Display icons using font ligatures -->
<span class="material-icons">home</span>
<span class="material-icons">search</span>
<span class="material-icons">favorite</span>

<!-- Different variants -->
<span class="material-icons-outlined">settings</span>
<span class="material-icons-round">add_circle</span>
<span class="material-icons-sharp">delete</span>
<span class="material-icons-two-tone">account_circle</span>

Individual Variant CSS Files

Optimized CSS files for specific icon variants to reduce bundle size.

/* Available individual CSS files */
/* iconfont/filled.css - Filled icons only */
/* iconfont/outlined.css - Outlined icons only */
/* iconfont/round.css - Round icons only */
/* iconfont/sharp.css - Sharp icons only */
/* iconfont/two-tone.css - Two-tone icons only */

Usage Examples:

// Import only needed variants to reduce bundle size
import 'material-icons/iconfont/filled.css';
import 'material-icons/iconfont/outlined.css';
// Instead of importing the full material-icons.css

CSS Class Alternative

Alternative usage method with CSS classes instead of font ligatures, generating 2124 individual CSS classes.

/* CSS class generation pattern */
/* Base pattern: .{$material-icons-css-prefix}-{icon-name-with-replacements} */
/* Default: underscore (_) replaced with dash (-) in icon names */

/* Generated classes for each icon variant */
.mi-123::before { content: "\eeaa"; }
.mi-360::before { content: "\e577"; }  
.mi-10k::before { content: "\e951"; }
.mi-pie-chart::before { content: "\e99a"; }
.mi-home::before { content: "\e88a"; }
.mi-search::before { content: "\e8b6"; }
.mi-account-circle::before { content: "\e853"; }
/* ... 2118+ more icon classes following same pattern */

/* Classes work with all font variants */
.material-icons .mi-{icon-name}::before { /* content for filled variant */ }
.material-icons-outlined .mi-{icon-name}::before { /* content for outlined variant */ }
.material-icons-round .mi-{icon-name}::before { /* content for round variant */ }
.material-icons-sharp .mi-{icon-name}::before { /* content for sharp variant */ }
.material-icons-two-tone .mi-{icon-name}::before { /* content for two-tone variant */ }

Usage Examples:

<!-- Using CSS classes with different variants -->
<span class="material-icons mi-pie-chart"></span>
<span class="material-icons-outlined mi-home"></span>
<span class="material-icons-round mi-search"></span>
<span class="material-icons-sharp mi-account-circle"></span>
<span class="material-icons-two-tone mi-settings"></span>

<!-- Icons with underscores become dashes in CSS classes -->
<span class="material-icons mi-18-up-rating"></span>  <!-- icon: 18_up_rating -->
<span class="material-icons mi-account-circle"></span> <!-- icon: account_circle -->
// Import CSS class styles (large file - 2124 classes)
import 'material-icons/css/material-icons.css';

// Or import minified version
import 'material-icons/css/material-icons.min.css';

Sass Variables

Customizable Sass variables for font configuration.

/* iconfont Sass variables */
$material-icons-font-path: './' !default;
$material-icons-font-size: 24px !default;
$material-icons-font-display: block !default;

/* css Sass variables */
$material-icons-css-prefix: 'mi' !default;
$material-icons-css-search: '_' !default;
$material-icons-css-replace: '-' !default;

Usage Examples:

// Customize before importing
$material-icons-font-path: '~material-icons/iconfont/';
$material-icons-font-size: 18px;
@import 'material-icons/iconfont/material-icons.scss';

// Or for CSS classes approach
$material-icons-css-prefix: 'icon';
@import 'material-icons/css/material-icons.scss';

Sass Mixins and Functions

Advanced Sass utilities for custom icon font implementation and CSS class generation.

/**
 * Creates a font-face declaration and CSS class for a Material Icon font variant
 * @param font-family - Font family name (e.g., 'Material Icons', 'Material Icons Outlined')
 */
@mixin material-icons-font($font-family);

/**
 * Applies base styling properties for Material Icon font classes
 * @param font-family - Font family name to apply
 */
@mixin material-icons-font-class($font-family);

/**
 * Generates CSS content for a specific icon using its codepoint
 * @param name - Icon name (e.g., 'home', 'search')
 * @param pseudo - Pseudo-element to target ('before' or 'after'), defaults to 'before'
 */
@mixin material-icon($name, $pseudo: 'before');

/**
 * String replacement utility function
 * @param string - Input string to process
 * @param search - String to search for
 * @param replace - Replacement string, defaults to empty string
 * @returns Modified string with replacements
 */
@function material-icons-str-replace($string, $search, $replace: '');

/**
 * Converts icon codepoint to CSS content value
 * @param codepoint - Unicode codepoint (e.g., 'e88a')
 * @returns Quoted CSS content string
 */
@function material-icons-content($codepoint);

/**
 * @deprecated As of v1.0, use '@extend .material-icons;' instead
 * Legacy mixin for Material Icons base styling
 */
@mixin material-icons();

Usage Examples:

// Create custom font variant
@include material-icons-font('Material Icons Custom');

// Apply base styling to custom class
.my-icon {
  @include material-icons-font-class('Material Icons');
}

// Create custom icon class with specific codepoint
.my-custom-home {
  @include material-icon('home');
}

// Use with ::after pseudo-element
.my-icon-after {
  @include material-icon('search', 'after');
}

// String manipulation
$cleaned-name: material-icons-str-replace('my_icon_name', '_', '-');
// Result: 'my-icon-name'

TypeScript Definitions

Type definitions for icon names providing type safety.

/**
 * Readonly tuple array containing all 2124 valid Material Design icon names
 */
type MaterialIcons = readonly [
  "123",
  "360", 
  "10k",
  "10mp",
  "11mp",
  "12mp",
  // ... (includes all 2124 icon names)
  "zoom_in",
  "zoom_in_map", 
  "zoom_out",
  "zoom_out_map"
];

/**
 * Union type of all valid Material Design icon names
 * Derived from MaterialIcons[number] for type safety
 */
type MaterialIcon = MaterialIcons[number];

export { MaterialIcon };

Usage Examples:

import { MaterialIcon } from 'material-icons';

// Type-safe icon name usage
const iconName: MaterialIcon = 'home'; // ✓ Valid
const badIcon: MaterialIcon = 'invalid'; // ✗ TypeScript error

// In React components
interface IconProps {
  name: MaterialIcon;
}

function Icon({ name }: IconProps) {
  return <span className="material-icons">{name}</span>;
}

Angular Material Integration

Specialized usage patterns for Angular Material's mat-icon component.

<!-- mat-icon with ligatures -->
<mat-icon>icon_name</mat-icon>
<mat-icon fontSet="material-icons-outlined">icon_name</mat-icon>
<mat-icon fontSet="material-icons-round">icon_name</mat-icon>
<mat-icon fontSet="material-icons-sharp">icon_name</mat-icon>
<mat-icon fontSet="material-icons-two-tone">icon_name</mat-icon>

<!-- mat-icon with CSS classes -->
<mat-icon fontIcon="mi-icon-name"></mat-icon>
<mat-icon fontSet="material-icons-outlined" fontIcon="mi-icon-name"></mat-icon>

Usage Examples:

<!-- Standard Angular Material usage -->
<mat-icon>home</mat-icon>
<mat-icon>search</mat-icon>
<mat-icon>settings</mat-icon>

<!-- With different variants -->
<mat-icon fontSet="material-icons-outlined">favorite</mat-icon>
<mat-icon fontSet="material-icons-round">add_circle</mat-icon>

<!-- With CSS classes -->
<mat-icon fontIcon="mi-pie-chart"></mat-icon>

Available Icons

The package includes 2124 Material Design icons covering all standard categories:

  • Action Icons: home, search, settings, favorite, delete, add, etc.
  • Navigation Icons: arrow_back, arrow_forward, menu, close, etc.
  • Communication Icons: email, phone, chat, message, etc.
  • Content Icons: add, create, save, copy, cut, paste, etc.
  • Device Icons: battery, wifi, bluetooth, camera, etc.
  • File Icons: folder, insert_drive_file, cloud, backup, etc.
  • Hardware Icons: keyboard, mouse, headset, etc.
  • Image Icons: photo, image, crop, filter, etc.
  • Maps Icons: place, directions, map, navigation, etc.
  • Social Icons: person, group, public, share, etc.

Icon names use snake_case format for ligatures (e.g., pie_chart, account_circle) and kebab-case for CSS classes (e.g., mi-pie-chart, mi-account-circle).

Types

/**
 * Readonly tuple array containing all 2124 valid Material Design icon names
 */
type MaterialIcons = readonly [
  "123",
  "360", 
  "10k",
  "10mp",
  "11mp",
  "12mp",
  "13mp",
  "14mp",
  "15mp",
  "16mp",
  "17mp",
  "18_up_rating",
  "18mp",
  "19mp",
  "1k",
  "1k_plus",
  "1x_mobiledata",
  // ... (includes all 2124 icon names)
  "zoom_in",
  "zoom_in_map", 
  "zoom_out",
  "zoom_out_map"
];

/**
 * Union type of all valid Material Design icon names
 * Derived from MaterialIcons[number] for type safety
 */
type MaterialIcon = MaterialIcons[number];

export { MaterialIcon };
Workspace
tessl
Visibility
Public
Created
Last updated
Describes
npmpkg:npm/material-icons@1.13.x
Publish Source
CLI
Badge
tessl/npm-material-icons badge