fix(VIcon): allow colons to be used in icon names (#14038)

fixes #13975

packages/vuetify/src/composables/__tests__/icons.spec.ts

@@ -0,0 +1,53 @@
+// Composables
+import { useIcon } from '../icons'
+
+// Utilities
+import { defineComponent } from 'vue'
+import { createVuetify } from '@/framework'
+import { mount } from '@vue/test-utils'
+import { describe, expect, it } from '@jest/globals'
+
+describe('icons.tsx', () => {
+  const Component = defineComponent({
+    props: {
+      icon: String,
+    },
+    setup (props) {
+      const { iconData } = useIcon(props)
+
+      return () => iconData.value.icon
+    },
+  })
+
+  const vuetify = createVuetify({
+    icons: {
+      defaultSet: 'mdi',
+      sets: {
+        custom: {
+          component: () => null,
+        },
+      },
+    },
+  })
+
+  it.each([
+    // Default icon set.
+    ['success', 'success'],
+    ['https://example.com/icon.svg', 'https://example.com/icon.svg'],
+    // MDI icon set.
+    ['mdi:success', 'success'],
+    // Custom icon set.
+    ['custom:https://example.com/icon.png', 'https://example.com/icon.png'],
+  ])('should return the correct icon name', (icon, expected) => {
+    const wrapper = mount(Component, {
+      props: {
+        icon,
+      },
+      global: {
+        plugins: [vuetify],
+      },
+    })
+
+    expect(wrapper.text()).toEqual(expected)
+  })
+})

packages/vuetify/src/composables/icons.tsx

@@ -182,17 +182,15 @@ export const useIcon = (props: Ref<string | undefined> | { icon?: IconValue }) =
       }
     }
 
-    const hasSet = icon.includes(':')
-    const setName = hasSet ? icon.split(':')[0] : icons.defaultSet
-    const iconName = hasSet ? icon.split(':')[1] : icon
-    const set = icons.sets[setName ?? icons.defaultSet]
+    const iconSetName = Object.keys(icons.sets).find(
+      setName => typeof icon === 'string' && icon.startsWith(`${setName}:`)
+    )
 
-    if (!set) {
-      throw new Error(`Could not find icon set "${setName}"`)
-    }
+    const iconName = iconSetName ? icon.slice(iconSetName.length + 1) : icon
+    const iconSet = icons.sets[iconSetName ?? icons.defaultSet]
 
     return {
-      component: set.component,
+      component: iconSet.component,
       icon: iconName,
     }
   })