SCSS Programming Interface

/**
 * Font file configuration
 * Controls the path to webfont files relative to compiled CSS
 */
$mdi-font-path: "../fonts" !default;

/**
 * Font family and file naming
 */
$mdi-filename: "materialdesignicons" !default;
$mdi-font-name: "Material Design Icons" !default;
$mdi-font-family: "materialdesignicons" !default;
$mdi-font-weight: "normal" !default;

/**
 * Base font size for icons
 * Default size when no size modifier class is applied
 */
$mdi-font-size-base: 24px !default;

/**
 * CSS class prefix for all generated classes
 * Change this to customize the class naming pattern
 */
$mdi-css-prefix: mdi !default;

/**
 * Package version used in font file URLs
 * Helps with cache busting during updates
 */
$mdi-version: "7.4.47" !default;

// Customize font path for your build setup
$mdi-font-path: './assets/fonts';

// Use a different class prefix
$mdi-css-prefix: icon;

// Change default size
$mdi-font-size-base: 20px;

// Import after setting variables
@import '~@mdi/font/scss/materialdesignicons';

/**
 * Complete map of all Material Design Icons
 * Maps icon names to their Unicode codepoints
 */
$mdi-icons: (
  "ab-testing": F01C9,
  "abacus": F16E0,
  "account": F0004,
  "account-alert": F0005,
  "account-box": F0006,
  "account-check": F0007,
  "account-circle": F0008,
  "account-edit": F06BC,
  "account-group": F0849,
  "account-key": F00A4,
  "account-multiple": F00A5,
  "account-outline": F00A6,
  "account-plus": F00A7,
  "account-remove": F00A8,
  "account-settings": F00A9,
  "home": F02DC,
  "home-outline": F06A1,
  "settings": F0493,
  "settings-outline": F0494,
  "email": F01EE,
  "email-outline": F01EF,
  "phone": F03F2,
  "phone-outline": F11A5,
  "refresh": F0450,
  "loading": F0772,
  "check": F012C,
  "check-circle": F012E,
  "close": F0156,
  "close-circle": F0158,
  "menu": F0349,
  "search": F049F,
  "star": F04CE,
  "star-outline": F04CF,
  "heart": F02D1,
  "heart-outline": F02D2,
  "download": F01DA,
  "upload": F054C,
  "delete": F01B4,
  "edit": F03EB,
  "copy": F018F,
  "folder": F024B,
  "folder-outline": F024C,
  "file": F0214,
  "file-outline": F0215
  // ... 7,400+ more icon definitions
) !default;

/**
 * Retrieves the Unicode character for a named Material Design icon
 * @param $name - Icon name without the mdi- prefix (e.g., "account", "home")
 * @returns Unicode character string for use in CSS content property
 * @warns If icon name is not found in the $mdi-icons map
 */
@function mdi($name) {
  @if map-has-key($mdi-icons, $name) == false {
    @warn "Icon #{$name} not found.";
    @return "";
  }
  @return char(map-get($mdi-icons, $name));
}

// Use in custom CSS classes
.custom-home-icon::before {
  content: mdi("home");
}

.save-button::before {
  content: mdi("content-save");
  margin-right: 8px;
}

// Dynamic icon generation
@each $icon-name in ("account", "home", "settings") {
  .custom-#{$icon-name}::before {
    content: mdi($icon-name);
  }
}

/**
 * Converts a Unicode codepoint to a CSS content string
 * Handles different Sass compiler behaviors for maximum compatibility
 * @param $character-code - Unicode codepoint (e.g., F0004)
 * @returns Escaped Unicode string suitable for CSS content property
 */
@function char($character-code) {
  @if function-exists("selector-append") {
    @return unquote("\"\\#{$character-code}\"");
  }
  @if "\\#{'x'}" == "\\x" {
    @return str-slice("\x", 1, 1) + $character-code;
  }
  @else {
    @return #{"\"\\"}#{$character-code + "\""};
  }
}

/**
 * Available icon sizes for generated utility classes
 * Generates .mdi-{size}px classes for each value
 */
$mdi-sizes: 18 24 36 48 !default;

// Add custom sizes
$mdi-sizes: 16 18 20 24 32 36 48 64;
@import '~@mdi/font/scss/materialdesignicons';

// This generates additional classes:
// .mdi-16px, .mdi-20px, .mdi-32px, .mdi-64px

/**
 * Available rotation angles for generated rotation classes
 * Generates .mdi-rotate-{degree} classes for each value
 */
$mdi-degrees: 45 90 135 180 225 270 315 !default;

// Add custom rotation angles
$mdi-degrees: 30 45 60 90 120 135 180 225 270 315;
@import '~@mdi/font/scss/materialdesignicons';

// This generates additional classes:
// .mdi-rotate-30, .mdi-rotate-60, .mdi-rotate-120

/**
 * Main SCSS entry point that imports all component modules
 * Import order is important for variable dependencies
 */
/* MaterialDesignIcons.com */
@import "variables";     // Icon definitions and configuration
@import "functions";     // Helper functions (char, mdi)
@import "path";          // Font-face declarations
@import "core";          // Base icon styles (.mdi, .mdi-set)
@import "icons";         // Individual icon classes (.mdi-*)
@import "extras";        // Utility classes (sizes, themes, transforms)
@import "animated";      // Animation classes (.mdi-spin)

// Import only specific modules
@import '~@mdi/font/scss/variables';
@import '~@mdi/font/scss/functions';
@import '~@mdi/font/scss/core';

// Use only the icon lookup function
.my-custom-icon::before {
  content: mdi("account");
  font-family: "Material Design Icons";
}

// Import with custom configuration
$mdi-font-path: './fonts';
$mdi-css-prefix: icon;
$mdi-font-size-base: 20px;

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

// Results in classes like .icon-account instead of .mdi-account

// Laravel Mix
// resources/sass/app.scss
$mdi-font-path: '/fonts';
@import '~@mdi/font/scss/materialdesignicons';

// Angular
// angular.json styles array or component styleUrls
@import '~@mdi/font/scss/materialdesignicons';

// Vue CLI
// In a .vue component
<style lang="scss">
@import '~@mdi/font/scss/materialdesignicons';
</style>

// React with Sass
// src/styles/main.scss
@import '~@mdi/font/scss/materialdesignicons';

// Using non-existent icon name
.invalid-icon::before {
  content: mdi("non-existent-icon");
  // Outputs SCSS warning: "Icon non-existent-icon not found."
  // Returns empty content: ""
}

// Checking if icon exists before use
@if map-has-key($mdi-icons, "custom-icon") {
  .custom-icon::before {
    content: mdi("custom-icon");
  }
} @else {
  .custom-icon::before {
    content: mdi("help-circle"); // fallback icon
  }
}