Vuetify 컴포넌트에 아이콘이 안 보인다면?

Vuetify를 이용하여 UI를 만들던 중 아이콘이 표시 안 되어 찾다 보니 Vuetify는 material-design-icons-iconfont를 이용해서 이게 설치 안 되어 있으면 안 보이더군요!

 

원인을 파악했으니 설치해봅시다!

CDN을 이용한 방법

<link href="https://fonts.googleapis.com/css?family=Material+Icons" rel="stylesheet">

직접 설치하는 방법

$ yarn add material-design-icons-iconfont -D
// OR
$ npm install material-design-icons-iconfont -D

직접 설치하는 경우, 추가 모듈을 yarn이 로드 안 하고 있어서 에러가 뜨는 거 같아요. 그러므로 프로젝트를 재실행해야 해요!

 

추가 설정

// src/plugins/vuetify.js

import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'md',
  },
})