Icons
The v-icon component provides a large set of glyphs to provide context to various aspects of your application. For a list of all available icons, visit the official Material Design Iconspage. To use any of these icons simply use the mdi- prefix followed by the icon name.
Usage
Icons come in two themes (light and dark), and five different sizes (x-small, small, medium (default), large, and x-large).
API
| Component | Description |
|---|---|
| v-icon | Primary Component |
Examples
Props
Color
Using color helpers you can change the color of an icon from the standard dark and light themes.
Misc
Font Awesome
Font Awesomeis also supported. Simply use the fa- prefixed icon name. Please note that you still need to include the Font Awesome icons in your project. For more information on how to install it, please navigate to the installation page
Note that this example is using an icon set prefix, because the default icon set in the documentation is mdi. You can read more about using multiple icon sets here
Material Design
Material Designis also supported. For more information on how to install it please navigate here
Note that this example is using an icon set prefix, because the default icon set in the documentation is mdi. You can read more about using multiple icon sets here
MDI SVG
You can manually import only the icons you use when using the @mdi/jspackage. Read more about using them here.
Note that this example is using an icon set prefix, because the default icon set in the documentation is mdi. You can read more about using multiple icon sets here
Accessibility
Icons can convey all sorts of meaningful information, so it’s important that they reach the largest amount of people possible. There are two use cases you’ll want to consider:
Decorative Icons are only being used for visual or branding reinforcement. If they were removed from the page, users would still understand and be able to use your page.
Semantic Icons are ones that you’re using to convey meaning, rather than just pure decoration. This includes icons without text next to them used as interactive controls — buttons, form elements, toggles, etc.
WAI-ARIA Authoring Practices 1.1 notes that aria-hidden="false" currently behaves inconsistently across browsers.
WIP: Our team will change to the component to not render aria-hidden="false" when you pass a label prop.
Decorative Font Icons
If your icons are purely decorative, you’ll need to manually add an attribute to each of your icons so they’re accessible.aria-hidden(automatically by vuetify)
Semantic Font Icons
If your icons have semantic meaning, you need to provide a text alternative inside a (or similar) element. Also include appropriate CSS to visually hide the element while keeping it accessible to assistive technologies.
<v-icon aria-hidden="false">
mdi-account
</v-icon>
Decorative SVG Icons
If your icons are purely decorative, you’ll need to manually add an attribute to each of your icons so they’re accessible.aria-hidden(automatically by vuetify)
Semantic SVG Icons
Apply accessibility attributes to the v-iconcomponent, such as role="img", to give it a semantic meaning.
<v-icon aria-label="My Account" role="img" aria-hidden="false">
mdiAccount
</v-icon>
<script setup>
import { mdiAccount } from "@mdi/js";
const icons = { mdiAccount }
</script>