How to use material design icons in nuxt

Viewed 3367
3 Answers

I figured it out,

Step 1: Add Google fonts icon's CDN.

export default {
  head () {
    return {
      link: [
        // Add this
        { rel: 'stylesheet', href: 'https://fonts.googleapis.com/icon?family=Material+Icons' }
      ],
    }
  }
}

Step 2: Use it (you are done!)

<template>
  // Add this
  <span class="material-icons">face</span>
</template>

Here is the complete list of Material Icons.

For Nuxt.js, you will need to install this package:

yarn add nuxt-material-design-icons-iconfont
// Or if you are using npm:
npm install nuxt-material-design-icons-iconfont

And declare that package within nuxt.config.js file:

modules: [
  'nuxt-material-design-icons-iconfont',
],

Add "nuxt-material-design-icons" in "modules" in nuxt.config.js

Related