How to import Vuetify icons correctly?

Not all icons from vuetify are rendering in my jsonForms component

I'm creating Vue component, that render jsonForms with vuetifyRenderers from '@jsonforms/vue-vuetify' and this part is ok. But instead of displaying icons I get this html

<i data-v-290f5f19="" class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true">
    <svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
        <path d="mdi-plus"></path>
    </svg>
</i>

But in the same time mdi-minus-box rendered correctly

<i class="v-icon notranslate v-theme--light v-icon--size-default" aria-hidden="true">
    <svg class="v-icon__svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" role="img" aria-hidden="true">
        <path d="M17,13H7V11H17M19,3H5C3.89,3 3,3.89 3,5V19C3,20.1 3.9,21 5,21H19C20.1,21 21,20.1 21,19V5C21,3.89 20.1,3 19,3Z"></path>
    </svg>
</i>

This is my vuetify code

import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { mdi, aliases as mdiAliases } from 'vuetify/iconsets/mdi-svg';
import { mdiIconAliases } from '@jsonforms/vue-vuetify';

const vuetify = createVuetify({
    components,
    directives,
    icons: {
        defaultSet: 'mdi',
        sets: {
            mdi,
        },
        aliases: {
            ...mdiAliases,
            ...mdiIconAliases,
        },
    },
})

I know that I can just add import '@mdi/font/css/materialdesignicons.css', but it's too large and icons which are not displayed are definitely in the package vuetify/iconsets What can be wrong? Maybe it's something with aliases?

Solution

The error was that the aliases from '@jsonforms/vue-vuetify', unlike 'vuetify/iconset/mdi-svg', contained just mdi tags instead of SVG code, so without connecting mdi package they were not displayed. Instead of connecting this heavy pack, I wrote my own alias, where I duplicated the elements, but with SVG code

Updated vuetify initialization:

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import { mdi, aliases as mdiAliases } from 'vuetify/iconsets/mdi-svg'
import { customAliases } from './icons/aliases.js'

const vuetify = createVuetify({
    components,
    directives,
    icons: {
        defaultSet: 'mdi',
        sets: {
            mdi,
        },
        aliases: {
            ...mdiAliases,
            ...customAliases,
        },
    },
})

My aliases:

const customAliases = {
    itemAdd: 'svg:M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z',
    itemMoveUp: 'svg:M13,20H11V8L5.5,13.5L4.08,12.08L12,4.16L19.92,12.08L18.5,13.5L13,8V20Z',
    itemMoveDown: 'svg:M11,4H13V16L18.5,10.5L19.92,11.92L12,19.84L4.08,11.92L5.5,10.5L11,16V4Z',
    itemDelete: 'svg:M19,4H15.5L14.5,3H9.5L8.5,4H5V6H19M6,19A2,2 0 0,0 8,21H16A2,2 0 0,0 18,19V7H6V19Z',
    calendarClock: 'svg:M15,13H16.5V15.82L18.94,17.23L18.19,18.53L15,16.69V13M19,8H5V19H9.67C9.24,18.09 9,17.07 9,16A7,7 0 0,1 16,9C17.07,9 18.09,9.24 19,9.67V8M5,21C3.89,21 3,20.1 3,19V5C3,3.89 3.89,3 5,3H6V1H8V3H16V1H18V3H19A2,2 0 0,1 21,5V11.1C22.24,12.36 23,14.09 23,16A7,7 0 0,1 16,23C14.09,23 12.36,22.24 11.1,21H5M16,11.15A4.85,4.85 0 0,0 11.15,16C11.15,18.68 13.32,20.85 16,20.85A4.85,4.85 0 0,0 20.85,16C20.85,13.32 18.68,11.15 16,11.15Z',
    clock: 'svg:M12,20A8,8 0 0,0 20,12A8,8 0 0,0 12,4A8,8 0 0,0 4,12A8,8 0 0,0 12,20M12,2A10,10 0 0,1 22,12A10,10 0 0,1 12,22C6.47,22 2,17.5 2,12A10,10 0 0,1 12,2M12.5,7V12.25L17,14.92L16.25,16.15L11,13V7H12.5Z',
    passwordHide: 'svg:M11.83,9L15,12.16C15,12.11 15,12.05 15,12A3,3 0 0,0 12,9C11.94,9 11.89,9 11.83,9M7.53,9.8L9.08,11.35C9.03,11.56 9,11.77 9,12A3,3 0 0,0 12,15C12.22,15 12.44,14.97 12.65,14.92L14.2,16.47C13.53,16.8 12.79,17 12,17A5,5 0 0,1 7,12C7,11.21 7.2,10.47 7.53,9.8M2,4.27L4.28,6.55L4.73,7C3.08,8.3 1.78,10 1,12C2.73,16.39 7,19.5 12,19.5C13.55,19.5 15.03,19.2 16.38,18.66L16.81,19.08L19.73,22L21,20.73L3.27,3M12,7A5,5 0 0,1 17,12C17,12.64 16.87,13.26 16.64,13.82L19.57,16.75C21.07,15.5 22.27,13.86 23,12C21.27,7.61 17,4.5 12,4.5C10.6,4.5 9.26,4.75 8,5.2L10.17,7.35C10.74,7.13 11.35,7 12,7Z',
    passwordShow: 'svg:M12,9A3,3 0 0,0 9,12A3,3 0 0,0 12,15A3,3 0 0,0 15,12A3,3 0 0,0 12,9M12,17A5,5 0 0,1 7,12A5,5 0 0,1 12,7A5,5 0 0,1 17,12A5,5 0 0,1 12,17M12,4.5C7,4.5 2.73,7.61 1,12C2.73,16.39 7,19.5 12,19.5C17,19.5 21.27,16.39 23,12C21.27,7.61 17,4.5 12,4.5Z',
    validationError: 'svg:M11,15H13V17H11V15M11,7H13V13H11V7M12,2C6.47,2 2,6.5 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20Z',
}
export { customAliases }

Aliases from '@jsonforms/vue-vuetify' for comparison:

import type { IconAliases } from './icons';

const aliases: IconAliases = {
  itemAdd: 'mdi-plus',
  itemMoveUp: 'mdi-arrow-up',
  itemMoveDown: 'mdi-arrow-down',
  itemDelete: 'mdi-delete',
  calendarClock: 'mdi-calendar-clock',
  clock: 'mdi-clock-outline',
  passwordHide: 'mdi-eye-off',
  passwordShow: 'mdi-eye',
  validationError: 'mdi-alert-circle-outline',
};

export { aliases };