feat(VIcon): Add 'tag' prop to VIcon that sets a custom tag to be used

Add a new optional prop to VIcon, the 'tag' prop, that specifies a custom tag to use in the
component, similar to the tag prop from VContainer. If none is provided, the component will fallback
to use <i> as the tag, for the benefit of backwards compatibility.

packages/vuetify/src/components/VIcon/VIcon.ts

@@ -33,7 +33,12 @@ const VIcon = mixins(
   props: {
     disabled: Boolean,
     left: Boolean,
-    right: Boolean
+    right: Boolean,
+    tag: {
+      type: String,
+      required: false,
+      default: 'i'
+    }
   },
 
   methods: {
@@ -104,7 +109,7 @@ const VIcon = mixins(
 
       this.applyColors(data)
 
-      return h('i', data, newChildren)
+      return h(this.tag, data, newChildren)
     },
     renderSvgIcon (icon: VuetifyIconComponent, h: CreateElement): VNode {
       const data = this.getDefaultData()

packages/vuetify/test/unit/components/VIcon/VIcon.spec.js

@@ -175,6 +175,20 @@ test('VIcon.js', ({ mount, compileToFunctions }) => {
     expect(clickHandler).toBeCalled()
   })
 
+  it('should use an <i> tag if none provided', () => {
+    const context = functionalContext({}, 'add')
+    const wrapper = mount(VIcon, context)
+
+    expect(wrapper.element.localName).toBe('i')
+  });
+
+  it('sets tag from from prop if provided', () => {
+    const context = functionalContext({ props: { tag: 'span' } }, 'add')
+    const wrapper = mount(VIcon, context)
+
+    expect(wrapper.element.localName).toBe('span')
+  });
+
   describe('for component icon', () => {
     const getTestComponent = () => ({
       props: ['name'],
@@ -253,7 +267,7 @@ test('VIcon.js', ({ mount, compileToFunctions }) => {
       const context = functionalContext({ on: { click: clickHandler } }, '$vuetify.icons.testIcon')
       const wrapper = mount(VIcon, context)
       wrapper.trigger('click')
-  
+
       expect(wrapper.element.classList).toContain('v-icon--link')
       expect(clickHandler).toBeCalled()
     })