【Vuetify】ハンバーガーアイコンが表示されなかった時のチョンボ事件

##概要
ポートフォリオを作成していて、レスポンシブ対応やらデザイン調整やらがお手頃に導入できると聞いてVuetifyを導入した。

・・・が、ヘッダー部分をスマホサイズで表示させた時に現れるいわゆるハンバーガーアイコンが表示されなくなった。

↓これ

その事象に出会した際の確認ポイントを挙げる。

##1. mdiのダウンロードは済んでいるか
Vuetifyのダウンロードだけではを利用できない。
Material Disign Icons（通称mdi）をインストールする必要がある。

terminal

npm install @mdi/font

また、Vuetify関連のファイルにいくつかアイコンフォントを利用できるよう施す。

Vuetify.js

import '@mdi/font/css/materialdesignicons.css'

// 既存のコンストラクタに下記のように追加
export default new Vuetify({
    icons: {
      iconfont: 'mdi', // 追加
    },
  })

##2.コンポーネントの一番大枠部分が<v-app>で括られているか
私はこれだった。
Vuetifyを使用する場合、各コンポーネントは<template>の次に<v-app>で定義しておくほうがよい。

(参考：Vuetify公式 "Application")

まだまだ勉強不足で、なぜ<v-app>がないとレンダリングされないのかは理解できていない。

一番大枠のコンポーネント.vue

<template>
   <v-app>
     <!-- Any Code -->
   </v-app>
</template>