Vuetify: [Feature Request] feature and/or documentation for adding custom icon to use in <v-icon>

[DrSensor]

New Functionality

Some of the enterprise projects have their own icon set, its necessary to use that icon in button or add a badge to that icon. Currently, vuetify can do this but only with the predefined icon (e.g mdl and awesome icon).

Improvements

Rather than adding the custom icon using SVG or PNG, the best practice is adding it using web font (developer can convert the SVG using some loader like icons-loader). I propose this feature can be set like setting theme so something like:

import Icon from '../assets/logo.svg'
import IconCollection from '../assets/CompanySet.font'

Vue.use(Vuetify, {
  icon: {
    prefix: IconCollection,
    icon_name: Icon
  }
})

then use it like

<v-icon>icon_name</v-icon>
<v-icon>prefix_company_logo</v-icon>

Bugs or Edge Cases it Helps Avoid

Make sure the documentation is clear that it can only accept @font-face style with its rule.

[manico]

This is a good idea as we are currently hard-coding font awesome in library.
In my company we also have our own set of icons with prefix n-i, for example n-i n-i-support.

Options for icon should be expanded to accept array of icons with different prefixes as some libraries have multiple like font awesome #2665

This way we delegate responsibility of keeping update with icon provider to developer.

I can play around with this if it is ok?

[johnleider]

Go for it @manico . As it stands, v-icon is a bit sloppy. We have a PR for adding svg support, but admittedly, I have not had a chance to really test any alternate implementations. If you happen to pass by that as well.

[garcianavalon]

Hi!
I would also be interested in this feature. Any way I can help getting it implemented?

[Dynamic-Gravity]

The current fontawesome 5 icons have vue components and are not currently compatible with v-icon.

So at this moment in time its either-or.

[nekosaur]

font awesome 5 is supported. just use their css.

[appurist]

I believe the PR #3591 above resolves this issue and much more. Not only can you replace all of the internal icons at startup/initialization time, you can also dynamically change them at any time later. See the code example where I demonstrate at least two things:

• all internal default MD icons are replaced with MDI icons universally at initialization time (it starts up in MDI mode)
• you can dynamically switch after startup by replacing each known internal icon with a new one.

For the purposes of this Issue, you could easily replace all internal (MD) icon names with icons from the FA icon sets:

Vue.use(Vuetify, { iconfont: "fa" })

This will cause Vuetify to use FA (Font-Awesome) icons for all internal icon references.

To dynamically change these two icons dynamically later on:

this.$vuetify.icons.checked = 'fas fa-check-square'
this.$vuetify.icons.unchecked = 'far fa-square'

This would replace the checkbox icons with the nearest Font Awesome icons.

It is also possible to combine these to specify an entire alternative icon set, and then also override _specific_ icons. The following uses the Font-Awesome (FA) icons everywhere, except that marked v-checkbox icon will be displayed with the MD "bug" icon, and an unchecked v-checkbox will show the MDI "anchor" icon:

Vue.use(Vuetify, {
  iconfont: "fa",
  icons: {
    "checked": "bug_report",
    "unchecked": "mdi-anchor"
  }
})

This only needs to be done once at startup if the intention is to use them everywhere like this.

[DrSensor]

Any guide how to add my own icon. For example, I have file myicon.svg/myicon.ico then how do I add/assign that?

[appurist]

@DrSensor I don't know enough about SVG icons to answer that, however there are some tools that may help, e.g. icomoon.ico where you can import your own and export it as css and js. I think it just uses svgxuse.js (written by the same author).

But then once you have loaded the corresponding css/js/svg, if it has at least one dash ('-') in the name, you can probably just use it directly (e.g. <v-icon>my-custom-svg-icon</v-icon>)

[BernardMarieOnzo]

hi, I would like to know if this feature is already implemented. if so, where could I get his documentation

[johnleider]

@BernardMarieOnzo The issue is still open.

[appurist]

@BernardMarieOnzo In case you didn't notice, Pull Request #3591 is related and provides a lot of similar functionality, but does not really resolve the request posted in this issue.

However the changes in that PR are expected to be part of the 1.1 release, and present in the dev branch currently. You may wish to read through #3591 and the comments in this one for more info. (That's not documentation per se, but it has a lot of info about changes coming that may or may not help your needs.)