# 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 Icons page. 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

# Examples

# Props

# Color

Using color helpers you can change the color of an icon from the standard dark and light themes.

# Events

# Click

Binding any click event to v-icon will automatically change the cursor to a pointer.

# Misc

# Buttons

Icons can be used inside of buttons to add emphasis to the action.

# Font Awesome

Font Awesome is 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

# Material Design

Material Design is also supported. For more information on how to install it please navigate here

# MDI SVG

You can manually import only the icons you use when using the @mdi/js package. If you want to use SVG icons with VIcon component, read about using them 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.

# 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-icon component, 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>
import { mdiAccount } from "@mdi/js";

export default {
  data: () => ({
    icons: {
      mdiAccount
    }
  })
};
</script>

Ready for more?

Continue your learning with related content selected by the Team or move between pages by using the navigation links below.
Edit this page on GitHub
Last updated:07/05/2020, 7:04:52 PM