fix(VIcon): trim string icon values (#16001)

Co-authored-by: Kael <kaelwd@gmail.com>

packages/vuetify/src/components/VIcon/__tests__/VIcon.spec.cy.tsx

@@ -0,0 +1,99 @@
+/// <reference types="../../../../types/cypress" />
+
+import { VClassIcon } from '..'
+import { VIcon } from '../VIcon'
+
+describe('VIcon', () => {
+  describe('icon prop', () => {
+    it('should render icon from default set', () => {
+      cy.mount(() => (
+        <VIcon icon="mdi-home" />
+      ))
+
+      cy.get('.v-icon').should('have.class', 'mdi')
+      cy.get('.v-icon').should('have.class', 'mdi-home')
+    })
+
+    it('should render aliased icon', () => {
+      cy.mount(() => (
+        <VIcon icon="$close" />
+      ))
+
+      cy.get('.v-icon').should('have.class', 'mdi')
+      cy.get('.v-icon').should('have.class', 'mdi-close')
+    })
+
+    it('should render icon from alternative set', () => {
+      cy.mount(() => (
+        <VIcon icon="foo:bar" />
+      ), null, {
+        icons: {
+          defaultSet: 'mdi',
+          sets: {
+            foo: {
+              component: props => <VClassIcon {...props} />,
+            },
+          },
+        },
+      })
+
+      cy.get('.v-icon').should('have.class', 'bar')
+    })
+  })
+
+  describe('default slot', () => {
+    it('should render icon from default set', () => {
+      cy.mount(() => (
+        <VIcon>mdi-home</VIcon>
+      ))
+
+      cy.get('.v-icon').should('have.class', 'mdi')
+      cy.get('.v-icon').should('have.class', 'mdi-home')
+    })
+
+    it('should render aliased icon', () => {
+      cy.mount(() => (
+        <VIcon>$close</VIcon>
+      ))
+
+      cy.get('.v-icon').should('have.class', 'mdi')
+      cy.get('.v-icon').should('have.class', 'mdi-close')
+    })
+
+    it('should render icon from alternative set', () => {
+      cy.mount(() => (
+        <VIcon>
+          foo:bar
+        </VIcon>
+      ), null, {
+        icons: {
+          defaultSet: 'mdi',
+          sets: {
+            foo: {
+              component: props => <VClassIcon {...props} />,
+            },
+          },
+        },
+      })
+
+      cy.get('.v-icon').should('have.class', 'bar')
+    })
+  })
+
+  it('should render svg icon', () => {
+    cy.mount(() => (
+      <VIcon icon="svg:M7,10L12,15L17,10H7Z" />
+    ))
+
+    cy.get('.v-icon svg').should('exist')
+    cy.get('.v-icon path').should('have.attr', 'd', 'M7,10L12,15L17,10H7Z')
+  })
+
+  it('should render class icon', () => {
+    cy.mount(() => (
+      <VIcon icon="class:foo" />
+    ))
+
+    cy.get('.v-icon').should('have.class', 'foo')
+  })
+})

packages/vuetify/src/composables/icons.tsx

@@ -184,8 +184,12 @@ export const useIcon = (props: Ref<string | undefined> | { icon?: IconValue }) =
 
     let icon: IconValue | undefined = iconAlias
 
-    if (typeof iconAlias === 'string' && iconAlias.includes('$')) {
-      icon = icons.aliases?.[iconAlias.slice(iconAlias.indexOf('$') + 1)]
+    if (typeof icon === 'string') {
+      icon = icon.trim()
+
+      if (icon.startsWith('$')) {
+        icon = icons.aliases?.[icon.slice(1)]
+      }
     }
 
     if (!icon) throw new Error(`Could not find aliased icon "${iconAlias}"`)