How to import Vuetify icons correctly?

Question

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?

Answer 1

This bit:

<path d="mdi-plus"></path>

...will never work.

SVG <path /> element has no knowledge of the existence of Vuetify or Material Design icons and what mdi-plus might mean. It expects an actual path, as defined by the SVG (Scalable Vector Graphics) standard.

You might want to replace the entire SVG with

<v-icon>mdi-plus</v-icon>

which will be replaced by Vue (with help from Vuetify) with an actual SVG, containing the correct path value for your icon.

---

Or, if you don't want to import the icons, as you mentioned, create a side test project where you install the icons properly and, whenever you need the path of an icon, render it in the test project and steal (copy/paste) its path to this one.

But you can't use mdi-plus (or any other icon name) as the d property of the path element.

Answer 2

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 };

Answer 3

The icons imported from @jsonforms/vue-vuetify rely on the MDI icon pack (mdi-svg), which requires explicitly importing the entire MDI icon set into Vuetify.

Without including the icon set, Vuetify has no SVG path data and thus can't render the icons, causing them to not appear.

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';
//Example
export default createVuetify({
 components,
 directives,
 icons: {
 defaultSet: 'mdi',
 sets: { mdi },
 aliases: {
 ...mdiAliases,
 ...customAliases,
 },
 },
});