{"id":12528,"library":"vue-material-design-icons","title":"Vue Material Design Icons","description":"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.","status":"active","version":"5.3.1","language":"javascript","source_language":"en","source_url":"https://github.com/robcresswell/vue-material-design-icons","tags":["javascript","vue","material design icons","mdi","icons","material","icon","svg","vue.js"],"install":[{"cmd":"npm install vue-material-design-icons","lang":"bash","label":"npm"},{"cmd":"yarn add vue-material-design-icons","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-material-design-icons","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Provides Vue single-file components. Compatible with Vue 2 and Vue 3.","package":"vue","optional":false}],"imports":[{"note":"Icon components are PascalCase and require the `.vue` extension in imports.","wrong":"const MenuIcon = require('vue-material-design-icons/Menu.vue');","symbol":"MenuIcon","correct":"import MenuIcon from 'vue-material-design-icons/Menu.vue';"},{"note":"Imports the optional global stylesheet for default icon sizing and coloring. Can conflict with `size` and `fillColor` props.","wrong":"const styles = require('vue-material-design-icons/styles.css');","symbol":"styles.css","correct":"import 'vue-material-design-icons/styles.css';"},{"note":"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`).","wrong":"import { AndroidIcon } from 'vue-material-design-icons/Android.vue';","symbol":"AndroidIcon","correct":"import AndroidIcon from 'vue-material-design-icons/Android.vue';"}],"quickstart":{"code":"\n\n\n\n\n","lang":"typescript","description":"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."},"warnings":[{"fix":"Review application performance after upgrading, especially on pages rendering numerous icons. Consider optimizing component usage if performance becomes an issue.","message":"Version 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.","severity":"breaking","affected_versions":">=5.0.0"},{"fix":"Always provide a meaningful `title` prop (e.g., ``) for icons that convey information. Omit the `title` prop for purely decorative icons to keep them hidden from screen readers.","message":"For 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.","severity":"gotcha","affected_versions":">=5.0.0"},{"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.","message":"The 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.","severity":"gotcha","affected_versions":">=4.0.0"},{"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.","message":"Icon 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.","severity":"gotcha","affected_versions":">=4.0.0"},{"fix":"Upgrade to `vue-material-design-icons@^5.3.1` or newer to ensure correct `aria-hidden` attribute handling and improved accessibility.","message":"Prior 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.","severity":"bug","affected_versions":"<5.3.1"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `import MyIcon from 'vue-material-design-icons/MyIcon.vue';` is correct, and then `components: { MyIcon }` is added to your Vue component definition.","cause":"The icon component was imported but not correctly registered in the Vue component's `components` option, or the import path/name was incorrect.","error":"[Vue warn]: Failed to resolve component: . If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement."},{"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';`.","cause":"Incorrect import path, missing `.vue` extension, or wrong casing for the icon file.","error":"ERROR in ./node_modules/vue-material-design-icons/Menu.vue Module not found: Error: Can't resolve './Menu.vue' in '...'"},{"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.","cause":"The `size` or `fillColor` prop is conflicting with styles from `vue-material-design-icons/styles.css` or custom CSS.","error":"Icon appears but doesn't scale with text or has an unexpected color."},{"fix":"Provide a descriptive `title` prop for the icon when it conveys meaning, e.g., ``. If the icon is purely decorative, no `title` is needed, but be aware it won't be announced.","cause":"The `title` prop was omitted or provided with a non-descriptive value, leading the icon to be `aria-hidden` or announced poorly.","error":"Screen readers ignore the icon or read its name verbatim, without context."}],"ecosystem":"npm"}