Add only needed icons to the build

I have the same problem as described here, i.e. my build is currently including half a megabyte of unused icons. The solution given in that answer doesn't work for me (the icons don't show), perhaps because I am using a newer version of Vuetify. I have followed the installation of @mdi/js and use of icons given in that answer, which also says

You simply pass the icon string to an SVG path element or in this case you can pass it directly to v-icon if you specify the icon font in the Vuetify config: iconfont: 'mdiSvg'.

If I try that in my config, I get an error:

'iconfont' does not exist in type

const vuetify = createVuetify({
    icons: {
        iconfont: 'mdiSvg',
        defaultSet: "mdi",
        aliases,
        sets: {
          mdi,
          fa,
        },
      },
      components: {
        VDatePicker,
      },
    directives,
  })

I am using the icons as below. If I include the full MDI set, as I have been doing, mdi-bike shows up, but mdiMap does not

  import { mdiMap } from '@mdi/js'
  ....
  ....
  <v-tab :value=Tabs.routes><v-icon :icon="mdiMap"></v-icon>All routes</v-tab>
  <v-tab :value=Tabs.newRide><v-icon>mdi-bike</v-icon>New Ride</v-tab>

Yes, there is no iconfont property in Vuetify 3 icon configuration.

The documentation for Vuetify 3 shows how to register the SVG iconfont:

import { createVuetify } from 'vuetify'
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg' // <---- use SVG icons

export default createVuetify({
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: {
      mdi,
    },
  },
})

As explained in the other answer, this means that you have to import all icons not used by Vuetify:

<script setup>
import { mdiAlertCircle } from '@mdi/js'
</script>
<template>
  <v-alert :icon="mdiAlertCircle" />
</template>