or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

index.md

tile.json

Material Design Icons

Material Design Icons provides two comprehensive icon sets from Google: Material Symbols (the current variable font-based set) and Material Icons (the classic static font set). This collection offers thousands of icons designed under Material Design guidelines, available as web fonts, SVG files, and platform-specific assets.

Package Information

Package Name: material-design-icons
Package Type: icon-collection
Language: CSS/Web Assets
License: Apache License Version 2.0
Browse Icons: https://fonts.google.com/icons
Repository: https://github.com/google/material-design-icons

Core Integration

Material Symbols (Recommended)

Web font integration:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet">

Alternative styles:

<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp" rel="stylesheet">

Material Icons (Classic)

Web font integration:

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

Additional styles:

<link href="https://fonts.googleapis.com/css?family=Material+Icons+Outlined" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Round" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Sharp" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Material+Icons+Two+Tone" rel="stylesheet">

Basic Usage

Material Symbols Usage

<!-- Basic icon usage -->
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">menu</span>

<!-- With custom styling -->
<span class="material-symbols-outlined" style="font-size: 48px;">favorite</span>

Material Icons Usage

<!-- Basic icon usage -->
<span class="material-icons">home</span>
<span class="material-icons">search</span>

<!-- Style variants -->
<span class="material-icons-outlined">favorite</span>
<span class="material-icons-round">favorite</span>
<span class="material-icons-sharp">favorite</span>
<span class="material-icons-two-tone">favorite</span>

Architecture

Material Design Icons is organized around two complementary icon systems designed for different use cases and technical requirements:

Icon Systems

Material Symbols (Recommended):

Modern variable font technology with dynamic customization
Single font file supports multiple variations via CSS properties
Four configurable axes: Fill, Weight, Grade, and Optical Size
Three visual styles: Outlined, Rounded, Sharp
Introduced April 2022, actively maintained and expanded

Material Icons (Legacy):

Traditional static fonts with pre-defined variations
Separate font files for each style combination
Five fixed styles: Outlined, Filled, Rounded, Sharp, Two-tone
Classic icon set, no longer receiving new icons

File Organization

Repository Structure:
├── symbols/           # Material Symbols (SVG sources)
├── variablefont/      # Material Symbols variable fonts  
├── font/             # Material Icons static fonts
├── android/          # Platform-specific Android assets
├── ios/              # Platform-specific iOS assets
├── png/              # Raster images (multiple resolutions)
└── svg/              # Individual SVG files

Usage Recommendations

Choose Material Symbols when:

Building new projects or interfaces
Need dynamic icon customization (weight, fill, size)
Want smaller file sizes (single variable font vs multiple static fonts)
Require the latest icon additions

Choose Material Icons when:

Maintaining existing projects with established Material Icons usage
Need the Two-tone style (not available in Material Symbols)
Working with systems that don't support variable fonts

Integration Philosophy

The collection provides multiple integration paths to support diverse development environments:

Web fonts for easy CDN-based integration
Direct files for custom implementations and offline usage
Platform assets for native mobile development
Multiple formats (fonts, SVG, PNG) for maximum compatibility

Capabilities

Variable Font Customization (Material Symbols)

Material Symbols support variable font axes for dynamic customization.

.material-symbols-outlined {
  font-variation-settings:
    'FILL' 0,
    'wght' 400,
    'GRAD' 0,
    'opsz' 24;
}

Font Variation Axes:

/* Fill axis: Controls icon fill (0-100) */
font-variation-settings: 'FILL' 1; /* Filled */
font-variation-settings: 'FILL' 0; /* Outlined */

/* Weight axis: Controls stroke weight (100-700) */
font-variation-settings: 'wght' 100; /* Thin */
font-variation-settings: 'wght' 400; /* Regular */
font-variation-settings: 'wght' 700; /* Bold */

/* Grade axis: Controls icon boldness (-50 to 200) */
font-variation-settings: 'GRAD' -25; /* Low emphasis */
font-variation-settings: 'GRAD' 0;   /* Normal */
font-variation-settings: 'GRAD' 200; /* High emphasis */

/* Optical Size axis: Optimizes for display size (20-48px) */
font-variation-settings: 'opsz' 20; /* Small sizes */
font-variation-settings: 'opsz' 24; /* Default */
font-variation-settings: 'opsz' 48; /* Large sizes */

Usage Examples:

/* Custom filled icon with heavy weight */
.icon-filled-heavy {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 1, 'wght' 700;
}

/* Light outlined icon for small sizes */
.icon-light-small {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 200, 'opsz' 20;
}

/* Dynamic icon that changes on hover */
.dynamic-icon {
  font-family: 'Material Symbols Outlined';
  font-variation-settings: 'FILL' 0, 'wght' 400;
  transition: font-variation-settings 0.2s ease;
}

.dynamic-icon:hover {
  font-variation-settings: 'FILL' 1, 'wght' 600;
}

Icon Sizing and Styling

Standard CSS properties apply to icon fonts.

.material-symbols-outlined,
.material-icons {
  /* Size control */
  font-size: 18px; /* or 24px, 36px, 48px */
  
  /* Color control */
  color: #000000;
  
  /* Alignment */
  vertical-align: middle;
  
  /* Prevent text selection */
  user-select: none;
}

Common Size Classes:

.icon-small { font-size: 18px; }
.icon-medium { font-size: 24px; }
.icon-large { font-size: 36px; }
.icon-xlarge { font-size: 48px; }

Platform-Specific Usage

Android Integration

<!-- Vector drawable usage -->
<vector
    android:width="24dp"
    android:height="24dp"
    android:viewportWidth="24"
    android:viewportHeight="24">
    <!-- SVG path data -->
</vector>

<!-- ImageView usage -->
<ImageView
    android:layout_width="wrap_content"
    android:layout_height="wrap_content"
    android:src="@drawable/ic_home_24dp" />

iOS Integration

// UIImage usage
let homeIcon = UIImage(named: "ic_home_24pt")

// SF Symbols style usage (if using SF Symbols variants)
let symbolConfig = UIImage.SymbolConfiguration(pointSize: 24, weight: .regular)
let homeSymbol = UIImage(systemName: "house", withConfiguration: symbolConfig)

Direct File Access

Access icons as individual files for custom implementations.

File Structure:

symbols/               # Material Symbols
├── outlined/
├── rounded/
└── sharp/

font/                 # Material Icons font files
├── MaterialIcons-Regular.ttf
├── MaterialIconsOutlined-Regular.otf
└── ...

png/                  # PNG raster images
├── 1x/
├── 2x/
└── 4x/

svg/                  # SVG vector files

SVG Usage:

<!-- Inline SVG -->
<svg width="24" height="24" viewBox="0 0 24 24">
    <path d="M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z"/>
</svg>

<!-- External SVG file -->
<img src="path/to/icons/home.svg" alt="Home" width="24" height="24">

Icon Names and Categories

Common Icon Names

<!-- Navigation -->
<span class="material-symbols-outlined">home</span>
<span class="material-symbols-outlined">menu</span>
<span class="material-symbols-outlined">arrow_back</span>
<span class="material-symbols-outlined">arrow_forward</span>

<!-- Actions -->
<span class="material-symbols-outlined">search</span>
<span class="material-symbols-outlined">favorite</span>
<span class="material-symbols-outlined">share</span>
<span class="material-symbols-outlined">delete</span>

<!-- Content -->
<span class="material-symbols-outlined">add</span>
<span class="material-symbols-outlined">edit</span>
<span class="material-symbols-outlined">save</span>
<span class="material-symbols-outlined">print</span>

<!-- Communication -->
<span class="material-symbols-outlined">email</span>
<span class="material-symbols-outlined">phone</span>
<span class="material-symbols-outlined">message</span>

<!-- Media -->
<span class="material-symbols-outlined">play_arrow</span>
<span class="material-symbols-outlined">pause</span>
<span class="material-symbols-outlined">stop</span>
<span class="material-symbols-outlined">volume_up</span>

Icon Categories

Available Categories:

Action icons (search, favorite, share, etc.)
Alert icons (warning, error, info, etc.)
AV icons (play, pause, volume, etc.)
Communication icons (email, phone, chat, etc.)
Content icons (add, edit, save, etc.)
Device icons (smartphone, tablet, laptop, etc.)
Editor icons (format_bold, format_italic, etc.)
File icons (folder, insert_drive_file, etc.)
Hardware icons (keyboard, mouse, headset, etc.)
Image icons (image, photo_camera, etc.)
Maps icons (place, directions, map, etc.)
Navigation icons (menu, arrow_back, close, etc.)
Notification icons (notifications, alarm, etc.)
Places icons (business, home, school, etc.)
Social icons (group, person, public, etc.)
Toggle icons (check_box, radio_button, star, etc.)

Types

CSS Classes

/* Material Symbols classes */
.material-symbols-outlined { font-family: 'Material Symbols Outlined'; }
.material-symbols-rounded { font-family: 'Material Symbols Rounded'; }
.material-symbols-sharp { font-family: 'Material Symbols Sharp'; }

/* Material Icons classes */  
.material-icons { font-family: 'Material Icons'; }
.material-icons-outlined { font-family: 'Material Icons Outlined'; }
.material-icons-round { font-family: 'Material Icons Round'; }
.material-icons-sharp { font-family: 'Material Icons Sharp'; }
.material-icons-two-tone { font-family: 'Material Icons Two Tone'; }

Font Variation Properties

interface MaterialSymbolsVariation {
  FILL: number;  // 0-100, controls fill
  wght: number;  // 100-700, controls weight  
  GRAD: number;  // -50 to 200, controls grade
  opsz: number;  // 20-48, optical size
}

type IconStyle = 'outlined' | 'rounded' | 'sharp';
type IconSize = 18 | 24 | 36 | 48;

File Formats

interface IconFileFormats {
  webFont: {
    woff2: string;
    woff: string;
    ttf: string;
    eot: string;
  };
  vector: {
    svg: string;
  };
  raster: {
    png: {
      '1x': string;
      '2x': string; 
      '4x': string;
    };
  };
  platform: {
    android: {
      vectorDrawable: string;
      png: string;
    };
    ios: {
      pdf: string;
      png: string;
    };
  };
}