Question: Icon behavior?

[jmarshall9120]

I'm implementing this myself and thought you might be willing to share your wisdom, given your template works so well. There is some sort of interesting interaction between Vuetify and Vite concerning Icons, that I haven't been able to find documented anywhere.

This sort of thing doesn't work anymore after migrating to Vite

<v-col class="d-flex flex-shrink-1"
          ><v-btn @pointerdown="onLeftPointerDown"
            ><v-icon>mdi-arrow-left-bold</v-icon></v-btn
          ></v-col
        >

I'm playing with your template, but I thought you might be willing to share your understanding here. Its a pretty esoteric little bug.

[kingyue737]

Thanks for your interest in this template, @jmarshall9120 !
Usage of icon in this template is documented here. I choose @mdi/js instead of @mdi/font in order not to include all the icons in the bundle which significantly increases the bundle size .

pnpm install -D @mdi/js

new Vuetify ({
  /* ... */
  icons: {
    iconfont: 'mdiSvg',     // not 'mdi' here
      values: {
        ...icons,
      },
    }
  }

But the con is that icons need to be registered manually.

You need to import mdiArrowLeftBold in @/plugins/icon.ts

// src/plugins/icons.ts
import {
  mdiAlert,
  mdiEye,
  mdiEyeOff,
  mdiBell,
  /* other icons ... */
  mdiArrowLeftBold,
} from '@mdi/js'

// icons in `mdi` object will be registered in Vuetify
const mdi = {
  mdiAlert,
  mdiEye,
  mdiEyeOff,
  mdiBell,
/* other icons ... */
  mdiArrowLeftBold
}

Then use mdiArrowLeftBold in vue template:

<v-icon>$mdi-arrow-left-bold</v-icon>

Don't forget the $ in front of icon name!

You can also switch back to @mdi/font if you don't care about bundle size or don't want to manually import icons. Ref to Vuetify official docs

[kingyue737]

If you are using @mdi/font, don't forget to import mdi css somewhere in your code

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