or run

npx @tessl/cli init

Version

Tile

Overview

Evals

Files

docs

css-usage.md index.md scss-usage.md theming-transforms.md

tile.json

tessl/npm-mdi--font

Webfont distribution for Material Design Icons providing CSS and SCSS integration for thousands of icons.

Workspace: tessl
Visibility: Public
Created: 3 months ago
Last updated: 3 months ago
Describes: pkg:npm/@mdi/font@7.4.x

To install, run

npx @tessl/cli install tessl/npm-mdi--font@7.4.0

Material Design Icons Font

Material Design Icons Font (@mdi/font) is a comprehensive webfont distribution containing 7,448 Material Design icons from both Stock and Community collections. It provides both CSS and SCSS integration for web applications, offering icons through CSS classes with support for themes, sizing, transformations, and animations.

Package Information

Package Name: @mdi/font
Package Type: npm
Language: CSS/SCSS
Installation: npm install @mdi/font

Core Imports

CSS Import

@import url('~@mdi/font/css/materialdesignicons.css');

Or via HTML link:

<link rel="stylesheet" href="node_modules/@mdi/font/css/materialdesignicons.css">

SCSS Import

@import '~@mdi/font/scss/materialdesignicons';

With custom configuration:

$mdi-font-path: './assets/fonts';
$mdi-css-prefix: icon;
@import '~@mdi/font/scss/materialdesignicons';

Basic Usage

<!-- Basic icon usage -->
<i class="mdi mdi-account"></i>
<i class="mdi mdi-home"></i>
<i class="mdi mdi-settings"></i>

<!-- Sized icons -->
<i class="mdi mdi-account mdi-18px"></i>
<i class="mdi mdi-home mdi-24px"></i>
<i class="mdi mdi-settings mdi-36px"></i>

<!-- Themed icons -->
<i class="mdi mdi-account mdi-dark"></i>
<i class="mdi mdi-home mdi-light"></i>

<!-- Transformed icons -->
<i class="mdi mdi-account mdi-rotate-90"></i>
<i class="mdi mdi-refresh mdi-spin"></i>

Architecture

Material Design Icons Font is built around several key components:

Webfont Files: Multiple font formats (WOFF2, WOFF, TTF, EOT) for browser compatibility
CSS Classes: Over 7,400 icon classes following .mdi-{icon-name} pattern
Utility Classes: Size modifiers, theme classes, transformation and animation classes
SCSS Variables: Configurable font paths, prefixes, and icon mappings
SCSS Functions: Helper functions for programmatic icon usage

Capabilities

CSS Icon Usage

Direct CSS class-based icon integration for HTML elements. Provides immediate access to all Material Design icons through predefined CSS classes.

/* Base icon class required for all icons */
.mdi {
  display: inline-block;
  font-family: "Material Design Icons";
  font-size: 24px;
  /* Additional font smoothing and rendering properties */
}

/* Individual icon classes (7,448 available) */
.mdi-account::before { content: "\\F0004"; }
.mdi-home::before { content: "\\F02DC"; }
.mdi-settings::before { content: "\\F0493"; }
/* ... thousands more icons */

CSS Usage

SCSS Programming Interface

SCSS variables, functions, and mixins for programmatic icon usage and customization. Enables build-time configuration and dynamic icon generation.

// Configuration variables
$mdi-font-path: "../fonts" !default;
$mdi-font-size-base: 24px !default;
$mdi-css-prefix: mdi !default;

// Icon lookup function
@function mdi($name: string) : string;

// Icon definitions map (7,448 entries)
$mdi-icons: (
  "account": F0004,
  "home": F02DC,
  "settings": F0493,
  // ... thousands more
) !default;

SCSS Usage

Icon Theming and Transformations

Built-in utility classes for styling, sizing, rotating, flipping, and animating icons. Provides consistent theming and visual effects across all icons.

/* Size classes */
.mdi-18px, .mdi-24px, .mdi-36px, .mdi-48px { /* size styling */ }

/* Theme classes */
.mdi-dark { color: rgba(0, 0, 0, 0.54); }
.mdi-light { color: rgba(255, 255, 255, 1); }

/* Rotation classes */
.mdi-rotate-45, .mdi-rotate-90, .mdi-rotate-135, .mdi-rotate-180,
.mdi-rotate-225, .mdi-rotate-270, .mdi-rotate-315 { /* rotation transforms */ }

/* Flip classes */
.mdi-flip-h, .mdi-flip-v { /* flip transforms */ }

/* Animation classes */
.mdi-spin { /* 2s infinite rotation animation */ }

Theming and Transformations

Types

// SCSS Variable Types (for TypeScript projects using SCSS)
type MDIIconName = string; // Any of 7,448 icon names like "account", "home", etc.

type MDISize = "18px" | "24px" | "36px" | "48px";

type MDIRotation = "45" | "90" | "135" | "180" | "225" | "270" | "315";

type MDITheme = "dark" | "light";

type MDITransform = "flip-h" | "flip-v";

type MDIAnimation = "spin";

// SCSS Configuration Interface
interface MDIConfig {
  fontPath?: string;        // Path to font files, default: "../fonts"
  fontSize?: string;        // Base font size, default: "24px"  
  cssPrefix?: string;       // CSS class prefix, default: "mdi"
  version?: string;         // Package version, default: "7.4.47"
}