Nuxt Material Icons

This module wraps the material-icons package by marella to ease the integration with Google's Material Icons & Symbols with your Nuxt project.

• ✨  Release Notes
• 🏀 Online playground
• 📖  Documentation

Features

• ⛰ Adds all of Google's Material Symbols & Icons
• 🚠 Wraps the material-icons package by marella with a simple custom component
• 🌲 Removes need for imports

Quick Setup

Install the module to your Nuxt application with one command:

npx nuxi module add nuxt-material-icons

That's it! You can now use Nuxt Material Icons in your Nuxt app ✨

Usage

The module will automatically make the MIcon component available to your application. All you need to pass is the props for the type of icon you want, and the icon name. The package will do the rest. For example:

<MIcon variant="two-tone" icon="pie_chart"/>

You can still style the icon as you would normally do with a vanilla import.

<MIcon
  variant="round"
  icon="add"
  style="font-size: 72px"
/>

Available Icons

You can find all available icons here. Google's Material Icons Guidelines can be found here

Contribution

# Install dependencies
npm install

# Generate type stubs
npm run dev:prepare

# Develop with the playground
npm run dev

# Build the playground
npm run dev:build

# Run ESLint
npm run lint

# Run Vitest
npm run test
npm run test:watch

# Release new version
npm run release