[Feature Request] Iconify Support

Problem to solve

Currently, the icons supported require loading the full CSS for icons, although this certainly works it adds quite a bit of bloat to the loading times and on very slow mobile networks can cause serious performance impacts. Generally speaking this the way everyone has always loaded icons and I say that continue to do so. However, we also need an alternative that allows loading the SVG icons.

Proposed solution

I am proposing support for https://iconify.design/ this would allow for potentially much faster load times (only load the icons on the page) and it would allow for the use of many different font packs without loading in any extra CSS or any bloat. The JS that runs it is also very small and in my own testing results in much better icon load times.

I propose that we continue to use the icon="" prop. Maybe in the same way we currently handle Material Design icons and font awesome we could use something like icon="iconify-mdi:google" where iconify- informs the vuetify icon render to use the iconify format. and the mdi:google gets passed to the data-icon="" part of the iconify format.

Another option would be to completely replace the current icon system and completely replace it with iconify as iconify already includes the Google Material Design Icons (whats currently default) as well as font-awesome, MDI and many more. Plus it could potentially actually decrease the amount of code logic required to create the icon HTML.

[cyberalien]

Author of Iconify here. I’d love to make Iconify work with Vue and solve any issues Vue users might have.

Looks like main issue is that Iconify messes with DOM. However it doesn’t really need to. It messes with DOM only if it sees icon placeholder, such as <span class="iconify" data-icon="mdi:home" /> to change it to <svg .../>.

But there are other ways to handle icons. Iconify script has many functions that can be used to render SVG without Iconify messing with DOM. Iconify exposes Iconify variable to global namespace that has many functions. I wrote short documentation for those functions: https://iconify.design/docs/functions/

Using those functions you can retrieve full SVG code and render it instead of using placeholder. For example

let icon1 = Iconify.getSVG('mdi:home');
let icon2 = Iconify.getSVG('fa-regular:home', {'data-rotate': '90deg'});
// ... render those icons

That’s the basic version.

However in reality its a bit more complex than that because icons need to be loaded first. Usually Iconify looks for icon placeholders, then requests icon data from API (or preloads them from localStorage if they were requested on previous page load), only then replaces placeholders with SVG. So rendering is asynchronous.

Iconify exposes functions to help with that:

• Iconify.preloadImages(['mdi:home', 'fa-regular:home']); - loads icons
• Iconify.iconExists('mdi:home'); - checks if icon exists Also there is DOM event you can subscribe to. It is fired when new icons have been loaded: IconifyAddedIcons.

With combination of those functions and event, you can build your own code to load icons, be notified when icons have loaded and render them.

Another solution is to bundle icons with package instead of loading icons from API. I’ve built React component that works like that: https://github.com/iconify/iconify-react so something like that might be built for Vue too.

I’m open to any suggestions and ideas. My goal is to build universal framework for icons and make it available on as many platforms as possible, so designers and users would have huge choice of icons on whatever platform they choose, including Vue.

[cyberalien]

Forgot about this issue, got reminded after receiving notification about issue being closed.

A while ago I’ve created Vue components for Iconify: @iconify/vue. It is available for Vue 2 and Vue 3.

Vue 2 documentation: https://docs.iconify.design/implementations/vue2/ Vue 3 documentation: https://docs.iconify.design/implementations/vue/