Vue Material Design Icon Components

A collection of Material Design Icons for Vue 3, exported as components with TypeScript support. Sourced from the MaterialDesign project.

Features

• 🎯 Vue 3 Composition API - Built for modern Vue 3 applications
• 📦 Tree-shakable - Only import the icons you need
• 🎨 TypeScript Support - Full type definitions included
• ⚡ Lightweight - Minimal runtime overhead
• ♿ Accessible - ARIA attributes included
• 🔧 Reactive - All props are reactive and work with Vue's reactivity system

Installation

npm install @brnbio/vue-material-design-icons

or

yarn add @brnbio/vue-material-design-icons

or

pnpm add @brnbio/vue-material-design-icons

Usage

Basic Usage (Recommended)

Import icons directly from the package using named exports:

<script setup lang="ts">
import { Menu, Android, Home } from '@brnbio/vue-material-design-icons';
</script>

<template>
  <Menu />
  <Android :size="32" />
  <Home fillColor="#ff0000" title="Home" />
</template>

With Options API

<script lang="ts">
import { defineComponent } from 'vue';
import { Menu, Android } from '@brnbio/vue-material-design-icons';

export default defineComponent({
  components: {
    Menu,
    Android,
  },
});
</script>

<template>
  <Menu />
  <Android :size="48" />
</template>

Global Registration

import { createApp } from 'vue';
import { Menu, Android, Home } from '@brnbio/vue-material-design-icons';
import App from './App.vue';

const app = createApp(App);

app.component('MenuIcon', Menu);
app.component('AndroidIcon', Android);
app.component('HomeIcon', Home);

app.mount('#app');

Optional Stylesheet

Add the included CSS to make icons scale with surrounding text:

import '@brnbio/vue-material-design-icons/styles.css';

Note: If you intend to handle sizing with the size prop, you may not want to use this as it may conflict.

Props

All icons accept the following props:

| Prop | Type | Default | Description | |------|------|---------|-------------| | title | string | undefined | Accessible title for screen readers. If provided, sets aria-label. If not provided, icon is hidden from screen readers with aria-hidden="true". | | fillColor | string | 'currentColor' | Fill color of the icon. Accepts any valid CSS color value. | | size | number \| string | 24 | Size of the icon (width and height in pixels). |

Examples

<template>
  <!-- Basic usage -->
  <Menu />

  <!-- With title for accessibility -->
  <Android title="Android operating system" />

  <!-- Custom size -->
  <Home :size="32" />

  <!-- Custom color -->
  <Heart fillColor="#ff0000" />

  <!-- Combine multiple props -->
  <Star
    title="Favorite"
    fillColor="gold"
    :size="48"
  />

  <!-- Click event -->
  <Close @click="handleClose" />
</template>

Additional Attributes

All icons support v-bind="$attrs", which means you can pass any HTML attributes:

<Menu
  class="my-custom-class"
  style="margin: 10px"
  data-testid="menu-icon"
/>

Icons

A list of all available icons can be found at the Material Design Icons website.

The icons are exported with PascalCase names. For example:

• account → Account
• arrow-left → ArrowLeft
• checkbox-marked-circle → CheckboxMarkedCircle
• ultra-high-definition → UltraHighDefinition

Import them like this:

import { Account, ArrowLeft, CheckboxMarkedCircle } from '@brnbio/vue-material-design-icons';

TypeScript Support

This library is written in TypeScript and includes full type definitions. You'll get autocomplete and type checking out of the box:

import type { IconProps } from '@brnbio/vue-material-design-icons';
import { Menu } from '@brnbio/vue-material-design-icons';

const iconProps: IconProps = {
  title: 'Menu',
  fillColor: 'blue',
  size: 32,
};

Custom Styling

If you want custom sizing with CSS classes, you can add your own styles:

.material-design-icon.icon-2x {
  height: 2em;
  width: 2em;
}

.material-design-icon.icon-2x > .material-design-icon__svg {
  height: 2em;
  width: 2em;
}

Then use it in your component:

<template>
  <Menu class="icon-2x" />
</template>

Alternatively, use the size prop for dynamic sizing:

<template>
  <Menu :size="48" />
</template>