fix(VIcon): add mdi set only if defaultSet is mdi

[dnldsht]

Description

Avoid adding the mdi set if defaultSet is not 'mdi'.

If you configure vuetify as follows

vuetify config

const nuxtIcon: IconSet = {
  component: (props: IconProps) => {
    return h(Icon, { name: props.icon })
  },
}

createVuetify({
  icons: {
    defaultSet: 'nuxtIcon',
    sets: {
      nuxtIcon,
    },
  },
})

the name of icon will change if it starts with mdi even if you are using the default mdi iconset provided by vuetify

packages/vuetify/src/composables/icons.tsx

export const useIcon = (props: Ref<IconValue | undefined>) => {
 // omitted code
 // eg: icon = 'mdi:pencil'
  const iconSetName = Object.keys(icons.sets).find(setName => typeof icon === 'string' && icon.startsWith(`${setName}:`));
  // this will remove mdi: (icon = 'pencil')
  const iconName = iconSetName ? icon.slice(iconSetName.length + 1) : icon;
  const iconSet = icons.sets[iconSetName ?? icons.defaultSet];

  return {
        component: iconSet.component,
        icon: iconName
  };
}

[johnleider]

I'm not understanding the use-case. I need a better reproduction example.

[dnldsht]

@johnleider here is a small reproduction https://stackblitz.com/edit/github-ph4pzm?file=app.vue

[johnleider]

I made a few tweaks. You can test this in the Vuetify playground with the following:

// vuetify/dev/icons.js

import { aliases, mdi as mdiSvg } from 'vuetify/src/iconsets/mdi-svg'
import { mdi } from 'vuetify/src/iconsets/mdi'
import { fa } from 'vuetify/src/iconsets/fa-svg'

export default {
  defaultSet: 'mdiSvg',
  aliases,
  sets: {
    mdi,
    mdiSvg,
    fa,
  },
}

and

<template>
  <v-app>
    <div class="ma-4 pa-4">
      <v-icon icon="mdi:pencil" />
      <br>
      <v-icon icon="fa:pencil" />
      <br>
      <v-icon icon="$success" />
    </div>
  </v-app>
</template>

<script setup>
  import { ref } from 'vue'
</script>

[dnldsht]

@johnleider looks good to me