Registry / web-framework / vue-material-design-icons

vue-material-design-icons

JSON →
library5.3.1jsnpmunverified

vue-material-design-icons provides a comprehensive collection of Material Design Icons encapsulated as Vue single-file components, enabling seamless integration into Vue.js projects. The library is currently stable at version 5.3.1 and maintains an active release cadence, frequently updating its icon set to mirror the upstream MaterialDesign project. A key differentiator is its packaging of each icon as an individual Vue component, allowing for granular imports and optimized bundle sizes. It supports both Vue 2 and Vue 3, with a significant breaking change in version 5.0.0 to introduce Vue 3 compatibility while ensuring continued support for Vue 2 applications. The package also offers an optional stylesheet for easier scaling and various props for customization like `fillColor` and `size`, along with important accessibility considerations for screen readers.

web-framework
npm install vue-material-design-icons
github ↗package ↗
INSTALL
IMPORT
SIG · VUE-MATERIAL-DESIG
V
vue-material-design-icons
web-frameworkjavascriptv5.3.1
Install
—
Import
—
Disk
—
Pass rate
0/ 6
Env Coverage0 / 6
glibc
18–22
musl
18–22
Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
musl
node 18–226 runs
build_error
glibc
node 18–226 runs
build_error
Code
Verified usage

Verified import paths — ran on the pinned version, not inferred.

MenuIcon
✓ import MenuIcon from 'vue-material-design-icons/Menu.vue';
✗ const MenuIcon = require('vue-material-design-icons/Menu.vue');
Icon components are PascalCase and require the `.vue` extension in imports.
styles.css
✓ import 'vue-material-design-icons/styles.css';
✗ const styles = require('vue-material-design-icons/styles.css');
Imports the optional global stylesheet for default icon sizing and coloring. Can conflict with `size` and `fillColor` props.
AndroidIcon
✓ import AndroidIcon from 'vue-material-design-icons/Android.vue';
✗ import { AndroidIcon } from 'vue-material-design-icons/Android.vue';
Individual icons are default exports of their respective `.vue` files. Icon names from materialdesignicons.com (e.g., `ultra-high-definition`) are converted to PascalCase (e.g., `UltraHighDefinition.vue`).

This example demonstrates how to install `vue-material-design-icons`, import individual icons as Vue components, optionally include the global stylesheet, and render multiple icons within a Vue 3 application. It showcases basic prop usage for `size`, `fillColor`, and `title`, while also indicating how to render purely decorative icons.

<!-- App.vue --> <template> <div id="app"> <h1>My Vue App with Material Icons</h1> <p> Here's a menu icon: <MenuIcon :size="32" fillColor="blue" title="Open Navigation" /> </p> <p> And an Android icon: <AndroidIcon title="Android Application" /> </p> <p> A larger, red home icon: <HomeIcon :size="48" fillColor="red" title="Go to homepage" /> </p> <p> A purely decorative icon: <LightbulbOnOutlineIcon /> </p> </div> </template> <script lang="ts"> import { defineComponent } from 'vue'; import MenuIcon from 'vue-material-design-icons/Menu.vue'; import AndroidIcon from 'vue-material-design-icons/Android.vue'; import HomeIcon from 'vue-material-design-icons/Home.vue'; import LightbulbOnOutlineIcon from 'vue-material-design-icons/LightbulbOnOutline.vue'; export default defineComponent({ name: 'App', components: { MenuIcon, AndroidIcon, HomeIcon, LightbulbOnOutlineIcon }, }); </script> <style> /* main.css or global styles */ @import 'vue-material-design-icons/styles.css'; /* Optional: for default scaling */ #app { font-family: Avenir, Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-align: center; color: #2c3e50; margin-top: 60px; } </style>
Debug
Known issues
breakingVersion 5.0.0 introduced Vue 3 compatibility but reverted previous changes that made components functional, potentially leading to minor performance regressions on pages with a high density of icons compared to earlier functional component implementations.
fix
Review application performance after upgrading, especially on pages rendering numerous icons. Consider optimizing component usage if performance becomes an issue.
affects: >=5.0.0
gotchaFor accessibility, icons are hidden from screen readers (`aria-hidden="true"`) by default if no `title` prop is provided. This forces developers to consider the icon's purpose. Provide a descriptive `title` for meaningful icons, or ensure purely decorative icons are correctly handled by assistive technologies.
fix
Always provide a meaningful `title` prop (e.g., `<MenuIcon title="Open navigation" />`) for icons that convey information. Omit the `title` prop for purely decorative icons to keep them hidden from screen readers.
affects: >=5.0.0
gotchaThe optional `styles.css` file includes CSS rules (e.g., `fill: currentColor;`) that might conflict with or override colors and sizes set via the `fillColor` or `size` props. If you import the stylesheet, CSS rules may take precedence.
fix
Decide on a primary method for styling: either use CSS classes alongside `styles.css` for consistent scaling, or rely solely on `fillColor` and `size` props and avoid importing `styles.css` if it causes conflicts.
affects: >=4.0.0
gotchaIcon names from the Material Design Icons website (which often use kebab-case like `ultra-high-definition`) must be converted to PascalCase (e.g., `UltraHighDefinition.vue`) and include the `.vue` extension for imports.
fix
Always use PascalCase for the icon name in the import path and ensure the `.vue` extension is present. Consult the library's documentation or the source code for exact component names if unsure.
affects: >=4.0.0
bugPrior to version 5.3.1, the `aria-hidden` attribute was set with a boolean value, which could be misinterpreted by browsers or accessibility tools expecting a string ('true' or 'false'). This was fixed to ensure correct string value usage.
fix
Upgrade to `vue-material-design-icons@^5.3.1` or newer to ensure correct `aria-hidden` attribute handling and improved accessibility.
affects: <5.3.1
Errors
Common errors & fixes
[Vue warn]: Failed to resolve component: <IconName>. If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
The icon component was imported but not correctly registered in the Vue component's `components` option, or the import path/name was incorrect.
fix
Ensure `import MyIcon from 'vue-material-design-icons/MyIcon.vue';` is correct, and then `components: { MyIcon }` is added to your Vue component definition.
ERROR in ./node_modules/vue-material-design-icons/Menu.vue Module not found: Error: Can't resolve './Menu.vue' in '...'
Incorrect import path, missing `.vue` extension, or wrong casing for the icon file.
fix
Verify the icon file name (PascalCase) and ensure the `.vue` extension is included in the import statement, e.g., `import MenuIcon from 'vue-material-design-icons/Menu.vue';`.
Icon appears but doesn't scale with text or has an unexpected color.
The `size` or `fillColor` prop is conflicting with styles from `vue-material-design-icons/styles.css` or custom CSS.
fix
Review your CSS rules and prop usage. If using `styles.css`, consider defining icon sizes and colors primarily via CSS classes, or ensure prop values override CSS as intended. Avoid conflicting approaches.
Screen readers ignore the icon or read its name verbatim, without context.
The `title` prop was omitted or provided with a non-descriptive value, leading the icon to be `aria-hidden` or announced poorly.
fix
Provide a descriptive `title` prop for the icon when it conveys meaning, e.g., `<MenuIcon title="Open navigation menu" />`. If the icon is purely decorative, no `title` is needed, but be aware it won't be announced.
Upgrade
Version history
5.3.1latest on npm
Audit
Dependencies
vuerequiredProvides Vue single-file components. Compatible with Vue 2 and Vue 3.
Agent activity
9 hits · last 30 days
node
8
OpenAI (training)
1
Resources
githubhttps://github.com/robcresswell/vue-material-design-icons ↗
packagehttps://www.npmjs.com/package/vue-material-design-icons ↗