CtrlK
BlogDocsLog inGet started
Tessl Logo

tessl/npm-mdi--font

Webfont distribution for Material Design Icons providing CSS and SCSS integration for thousands of 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

theming-transforms.mddocs/

Icon Theming and Transformations

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

Capabilities

Size Modifier Classes

Predefined size classes that override the default 24px icon size for different use cases.

/**
 * Size modifier classes for icons
 * Applied in combination with base .mdi class
 */
.mdi-18px.mdi-set,
.mdi-18px.mdi:before {
  font-size: 18px;
}

.mdi-24px.mdi-set,
.mdi-24px.mdi:before {
  font-size: 24px;
}

.mdi-36px.mdi-set,
.mdi-36px.mdi:before {
  font-size: 36px;
}

.mdi-48px.mdi-set,
.mdi-48px.mdi:before {
  font-size: 48px;
}

Usage Examples:

<!-- Small icons for compact layouts -->
<i class="mdi mdi-account mdi-18px"></i>

<!-- Default size (24px) - no class needed -->
<i class="mdi mdi-home"></i>

<!-- Medium icons for headers -->
<i class="mdi mdi-settings mdi-36px"></i>

<!-- Large icons for emphasis -->
<i class="mdi mdi-star mdi-48px"></i>

Color Theme Classes

Predefined color themes following Material Design guidelines for light and dark interfaces.

/**
 * Dark theme colors for icons
 * Suitable for light backgrounds
 */
.mdi-dark:before {
  color: rgba(0, 0, 0, 0.54);
}

.mdi-dark.mdi-inactive:before {
  color: rgba(0, 0, 0, 0.26);
}

/**
 * Light theme colors for icons  
 * Suitable for dark backgrounds
 */
.mdi-light:before {
  color: white;
}

.mdi-light.mdi-inactive:before {
  color: rgba(255, 255, 255, 0.3);
}

Usage Examples:

<!-- Dark theme icons (for light backgrounds) -->
<div class="light-toolbar">
  <i class="mdi mdi-menu mdi-dark"></i>
  <i class="mdi mdi-search mdi-dark"></i>
  <i class="mdi mdi-settings mdi-dark mdi-inactive"></i>
</div>

<!-- Light theme icons (for dark backgrounds) -->
<div class="dark-header">
  <i class="mdi mdi-home mdi-light"></i>
  <i class="mdi mdi-account mdi-light"></i>
  <i class="mdi mdi-notifications mdi-light mdi-inactive"></i>
</div>

Rotation Transform Classes

CSS transform classes for rotating icons by predefined angles, useful for indicating direction or state.

/**
 * Rotation transform classes
 * Rotates icons using CSS transforms around their center point
 */
.mdi-rotate-45:before {
  -webkit-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  transform: rotate(45deg);
}

.mdi-rotate-90:before {
  -webkit-transform: rotate(90deg);
  -ms-transform: rotate(90deg);
  transform: rotate(90deg);
}

.mdi-rotate-135:before {
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
}

.mdi-rotate-180:before {
  -webkit-transform: rotate(180deg);
  -ms-transform: rotate(180deg);
  transform: rotate(180deg);
}

.mdi-rotate-225:before {
  -webkit-transform: rotate(225deg);
  -ms-transform: rotate(225deg);
  transform: rotate(225deg);
}

.mdi-rotate-270:before {
  -webkit-transform: rotate(270deg);
  -ms-transform: rotate(270deg);
  transform: rotate(270deg);
}

.mdi-rotate-315:before {
  -webkit-transform: rotate(315deg);
  -ms-transform: rotate(315deg);
  transform: rotate(315deg);
}

Usage Examples:

<!-- Rotated navigation arrows -->
<i class="mdi mdi-chevron-right"></i>
<i class="mdi mdi-chevron-right mdi-rotate-90"></i>  <!-- Down arrow -->
<i class="mdi mdi-chevron-right mdi-rotate-180"></i> <!-- Left arrow -->
<i class="mdi mdi-chevron-right mdi-rotate-270"></i> <!-- Up arrow -->

<!-- Rotated icons for visual interest -->
<i class="mdi mdi-cog mdi-rotate-45"></i>
<i class="mdi mdi-diamond mdi-rotate-45"></i>
<i class="mdi mdi-square mdi-rotate-45"></i>

Flip Transform Classes

CSS transform classes for flipping icons horizontally or vertically, creating mirror effects.

/**
 * Horizontal flip transform
 * Mirrors the icon along the vertical axis
 */
.mdi-flip-h:before {
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

/**
 * Vertical flip transform
 * Mirrors the icon along the horizontal axis
 */
.mdi-flip-v:before {
  -webkit-transform: scaleY(-1);
  transform: scaleY(-1);
  filter: FlipV;  
  -ms-filter: "FlipV";
}

Usage Examples:

<!-- Horizontally flipped icons -->
<i class="mdi mdi-arrow-right"></i>
<i class="mdi mdi-arrow-right mdi-flip-h"></i> <!-- Arrow pointing left -->

<!-- Vertically flipped icons -->
<i class="mdi mdi-triangle"></i>
<i class="mdi mdi-triangle mdi-flip-v"></i> <!-- Upside down triangle -->

<!-- Directional icons -->
<i class="mdi mdi-format-align-left"></i>
<i class="mdi mdi-format-align-left mdi-flip-h"></i> <!-- Right align -->

Animation Classes

CSS animation classes for creating visual effects like loading spinners and attention-grabbing elements.

/**
 * Spinning animation class
 * Creates continuous 360-degree rotation over 2 seconds
 */
.mdi-spin:before {
  -webkit-animation: mdi-spin 2s infinite linear;
  animation: mdi-spin 2s infinite linear;
}

/**
 * Keyframes for spinning animation
 * Compatible with WebKit browsers
 */
@-webkit-keyframes mdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

/**
 * Standard keyframes for spinning animation
 */
@keyframes mdi-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

Usage Examples:

<!-- Loading spinners -->
<i class="mdi mdi-loading mdi-spin"></i>
<i class="mdi mdi-refresh mdi-spin"></i>
<i class="mdi mdi-cog mdi-spin"></i>

<!-- Loading states with text -->
<button disabled>
  <i class="mdi mdi-loading mdi-spin"></i> Processing...
</button>

<!-- Animated icons in status messages -->
<div class="status-message">
  <i class="mdi mdi-sync mdi-spin"></i>
  Synchronizing data...
</div>

Combining Transform Classes

Multiple transformation classes can be combined for complex visual effects.

/**
 * Transform classes can be combined
 * Order of application: rotation, then flip, then animation
 */
.mdi-rotate-90.mdi-flip-h:before {
  -webkit-transform: scaleX(-1) rotate(90deg);
  transform: scaleX(-1) rotate(90deg);
  filter: FlipH;
  -ms-filter: "FlipH";
}

Usage Examples:

<!-- Combined transformations -->
<i class="mdi mdi-arrow-up mdi-rotate-45 mdi-flip-h"></i>

<!-- Size + theme + rotation -->
<i class="mdi mdi-chevron-right mdi-36px mdi-dark mdi-rotate-90"></i>

<!-- Animation + theme + size -->
<i class="mdi mdi-loading mdi-spin mdi-light mdi-24px"></i>

<!-- Complex combination -->
<i class="mdi mdi-account mdi-48px mdi-dark mdi-rotate-180 mdi-flip-v"></i>

Custom CSS Styling

Icons can be further customized with regular CSS properties in addition to the utility classes.

/* Custom icon styling */
.custom-icon {
  color: #ff5722;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
}

.custom-icon:hover {
  color: #d84315;
  transform: scale(1.1);
}

/* Gradient icons */
.gradient-icon {
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Outlined icons */
.outlined-icon {
  color: transparent;
  text-shadow: 0 0 0 #333;
  -webkit-text-stroke: 1px #333;
}

Usage Examples:

<!-- Custom styled icons -->
<i class="mdi mdi-heart custom-icon"></i>
<i class="mdi mdi-star gradient-icon"></i>
<i class="mdi mdi-circle outlined-icon"></i>

<!-- Interactive icons -->
<button class="icon-button">
  <i class="mdi mdi-favorite custom-icon"></i>
</button>

Accessibility Considerations

Proper accessibility practices when using icon transformations and themes.

<!-- Screen reader friendly icons -->
<i class="mdi mdi-account mdi-dark" aria-label="User account"></i>
<i class="mdi mdi-loading mdi-spin" aria-label="Loading" aria-hidden="false"></i>

<!-- Decorative icons should be hidden from screen readers -->
<i class="mdi mdi-star mdi-rotate-45" aria-hidden="true"></i>

<!-- Icons with semantic meaning -->
<button>
  <i class="mdi mdi-delete mdi-dark" aria-hidden="true"></i>
  <span class="sr-only">Delete item</span>
</button>

Browser Compatibility

Transform and animation compatibility across different browsers.

/* CSS transforms work in */
/* - Chrome 4+, Firefox 3.5+, Safari 3.1+, IE 9+ */

/* CSS animations work in */  
/* - Chrome 4+, Firefox 5+, Safari 4+, IE 10+ */

/* WebKit prefixes for older browser support */
/* Included automatically in the generated CSS */

docs

css-usage.md

index.md

scss-usage.md

theming-transforms.md

tile.json