iconify/iconify

Universal icon framework. One syntax for FontAwesome, Material Design Icons, DashIcons, Feather Icons, EmojiOne, Noto Emoji and many other open source icon sets (over 150 icon sets and 200k icons). SVG framework, React, Vue and Svelte components!

Iconify is the most versatile icon framework.

• Unified icon framework that can be used with any icon library.
• Out of the box includes 150+ icon sets with more than 200,000 icons.
• Embed icons in HTML with Iconify Icon web component or components for front-end frameworks.
• Embed icons in designs with plug-ins for Figma, Sketch and Adobe XD.
• Add icon search to your applications with Iconify Icon Finder.

For more information visit https://iconify.design/.

Iconify parts

There are several parts of project, some are in this repository, some are in other repositories.

What is included in this repository?

• Directory packages contains main reusable packages: types, utilities, reusable functions used by various components.
• Directory iconify-icon contains iconify-icon web component that renders icons. It also contains wrappers for various frameworks that cannot handle web components.
• Directory components contains older version of icon components that are native to various frameworks, which do not use web component.
• Directory plugins contains plugins for various frameworks, which generate icons.

Other repositories you might want to look at:

• Data for all icons is available in iconify/icon-sets repository.
• Tools for parsing icons and generating icon sets are available in iconify/tools repository.

Iconify icon components

Main packages in this repository are various icon components.

Why are those icon components needed? Iconify icon components are not just yet another set of icon components. Unlike other icon components, Iconify icon components do not include icon data. Instead, icon data is loaded on demand from Iconify API.

Iconify API provides data for over 200,000 open source icons! API is hosted on publicly available servers, spread out geographically to make sure visitors from all over the world have the fastest possible connection with redundancies in place to make sure it is always online.

Why is API needed?

When you use an icon font, each visitor loads an entire font, even if your page only uses a few icons. This is a major downside of using icon fonts. That limits developers to one or two fonts or icon sets.

If you are using typical icon set that is not a font, you still need to bundle all icons used in your application, even ones that visitor does not need.

Unlike icon fonts and components for various icon sets, Iconify icon components dynamically load icon data from Iconify API whenever it is needed.

This makes it possible to have an unlimited choice of icons!

Packages in this repository

There are several types of packages, split in their own directories.

Main packages

Directory packages contains main packages that are reusable by all other packages in this repository as well as third party components.

Main packages:

• Iconify types - TypeScript types.
• Iconify utils - common files used by various Iconify projects (including tools, API, etc...).
• Iconify core - common files used by icon components and plugins.
• API redundancy - library for managing redundancies for loading data from API: handling timeouts, rotating hosts. It provides fallback for loading icons if main API host is unreachable.

Web component

Directory iconify-icon contains iconify-icon web component and wrappers for various frameworks.

Package	Usage
Web component	Everywhere
React wrapper	React
SolidJS wrapper	SolidJS

Frameworks that are confirmed to work with web components without custom wrappers:

• Svelte.
• Lit.
• Ember.
• Vue 2 and Vue 3, but requires custom config when used in Nuxt (see below).
• React, but with small differences, such as using class instead of className. Wrapper fixes it and provides types.

Demo

Directory iconify-icon-demo contains demo packages that show usage of iconify-icon web component.

• React demo - demo using web component with React. Run npm run dev to start demo.
• Next.js demo - demo for web component with Next.js. Run npm run dev to start demo.
• Svelte demo with Vite - demo for web component with Svelte using Vite. Run npm run dev to start demo.
• SvelteKit demo - demo for web component with SvelteKit. Run npm run dev to start the demo.
• Vue 3 demo - demo for web component with Vue 3. Run npm run dev to start demo.
• Nuxt 3 demo - demo for web component with Nuxt 3. Run npm run dev to start demo. Requires custom config, see below.
• Vue 2 demo - demo for web component with Vue 2. Run npm run build to build demo and npm run serve to start it.
• SolidJS demo - demo using web component with SolidJS. Run npm run dev to start demo.
• Lit demo - demo for web component with Lit. Run npm run start to start demo.

Nuxt 3 usage

When using web component with Nuxt 3, you need to tell Nuxt that iconify-icon is a custom element. Otherwise it will show few warnings in dev mode.

Example nuxt.config.ts:

export default defineNuxtConfig({
	vue: {
		compilerOptions: {
			isCustomElement: (tag) => tag === 'iconify-icon',
		},
	},
});

This configuration change is not needed when using Vue with @vitejs/plugin-vue.

Iconify icon components

Directory components contains native components for several frameworks:

Package	Usage
React component	React
Vue component	Vue
Svelte component	Svelte

Deprecation notice

Components in directory components are slowly phased out in favor of iconify-icon web component. Components are still maintained and supported, but it is better to switch to web component.

Functionality is identical, but web component has some advantages:

• No framework specific shenanigans. Events and attributes are supported for all frameworks.
• Works better with SSR (icon is rendered only in browser, but because icon is contained in shadow DOM, it does not cause hydration problems).
• Better interoperability. All parts of applicaiton reuse same web component, even if those parts are written in different frameworks.

Deprecation status:

• SVG Framework: can be replaced with iconify-icon.
• React component: can be replaced with iconify-icon using @iconify-icon/react wrapper.
• Svelte component: can be replaced with iconify-icon, does not require Svelte specific wrapper.
• Vue 3 component: can be replaced with iconify-icon, does not require Vue specific wrapper.
• Vue 2 component: can be replaced with iconify-icon, does not require Vue specific wrapper. Make sure you are not using Webpack older than version 5.
• Ember component: can be replaced with iconify-icon, does not require Ember specific wrapper.

To import web component, just import it once in your script, as per iconify-icon README file.

Demo

Directory components-demo contains demo packages that show usage of icon components.

• React demo - demo for React component. Run npm run dev to start demo.
• Next.js demo - demo for React component with Next.js. Run npm run dev to start demo.
• Vue demo - demo for Vue component. Run npm run dev to start demo.
• Nuxt demo - demo for Vue component with Nuxt. Run npm run dev to start demo.
• Svelte demo with Vite - demo for Svelte component using Vite. Run npm run dev to start demo.
• SvelteKit demo - demo for SvelteKit, using Svelte component on the server and in the browser. Run npm run dev to start the demo.

Plugins

Directory plugins contains plugins.

Package	Usage
Tailwind CSS plugin	Tailwind CSS

Demo

Directory plugins-demo contains demo packages that show usage of plugins.

• Tailwind demo - demo for Tailwind CSS plugin. Run npm run build to build demo, open src/index.html in browser to see result.

Installation, debugging and contributing

See CONTRIBUTING.md.

Sponsors

Documentation

Documentation for all packages is available on Iconify documentation website:

• Types documentation.
• Utilities documentation.
• Icon components documentation.
• Tailwind CSS plugin documentation.

Licence

Iconify is licensed under MIT license.

SPDX-License-Identifier: MIT

Some packages of this monorepo in previous versions were dual-licensed under Apache 2.0 and GPL 2.0 licence, which was messy and confusing. This was later changed to MIT for simplicity.

This licence does not apply to icons. Icons are released under different licences, see each icon set for details. Icons available by default are all licensed under various open-source licences.

© 2020-PRESENT Vjacheslav Trushkin

iconify's Issues

Error building with iconify api

When I Run build inside GatsbyJS it says Building static HTML failed but only Iconify for React with API. method

Im wan't the Api version because I need to call the icon name with a string

is it possible to support stroke-width?

like is:

<span class="iconify" data-icon="carbon:bat" data-stroke-width="5">

<!-- or css -->
<span class="iconify stroke-5" data-icon="carbon:bat">

<style>
.stroke-5 {
  stroke-width: 5;
}
</style>

reference: https://iconpark.bytedance.com/official

Bug: Iconify Basic not replacing dynamically added icons

Demo code in https://gist.github.com/schlomo/fc4711655332cb30198bdf81a9863dc6

With Iconify.basic and preloaded icons it doesn't convert icons added later on.

The example illustrates this (run with npm start). The result you see is that the X in the web page are not converted to an icon.

Uncomment the Iconify.scanDOM() line in index.js to see that then the X are converted. With regular @Iconify/Iconify the Iconify.scanDOM() call is not necessary.

Support for react 17

First of all many thanks for developing this library. It's been of great use!

Unfortunately the base project I used for my project moved to React 17 recently. NPM install now returns:

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR!   react@"^17.0.1" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.0.0" from @iconify/[email protected]
npm ERR! node_modules/@iconify/react
npm ERR!   @iconify/react@"*" from the root project
npm ERR! 
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR! 

Will this library support react 17 in the near future? Or is there something else I'm missing?

"Module '\"../../../node_modules/@iconify/icons-mdi-light/alert\"' has no exported member 'alert'."

I am trying to use Iconify in a Stencil component.

This repo: https://github.com/adaept/ae-svgtest-component/tree/iconify-test

I tried various suggestions from the documentation but cannot get it to work.

Specific Code: https://github.com/adaept/ae-svgtest-component/blob/iconify-test/src/components/ae-svgtest-component/ae-svgtest-component.tsx

I tried using import Iconify from '@iconify/iconify' but that gives the error "no module exported for alert" where alert is the test icon.

Question: why is npm install using --save-dev ?

I notice that the instructions indicate to install the package with npm install --save-dev but this seems counter-intuitive to me. Wouldn't the library be needed in production as well. Can you please confirm, and I'd recommend amending the docs either way just to avoid any confusion.

TODO: implement lazy load

Hello,

I have used your framework for the first time today, and in comparison to other similar frameworks (devicon & font-mfizz), I have found it to be the most performant capable. Your library/framework seems to be the monst maintained and lightweight, not to mention complete with all my UI needs. However, there is something neither of those networks support, and yours doesn't either, which I would like to suggest: lazy loading for setting svg content.

It can be used in the following ways:

• on events (injectable prototype events or dom events)
• user interactivity (native web performance lazy loading which doesn't handle svg yet)
• trigger methods from configuration (personal user code design)

I would like to hear back from you, and know if there is any way to approach the subject currently. You can see an example of how I'm using your amazing framework here: https://sgonzalez.tech/about/ ... By the time of writing this review, I'm still using the other two libraries due to time constraint, but will probably phase completely to using this only.

P.S.: I found it extremely nice how when my script is disabled (and thus, svg paths not loaded yet), the data-icon text is still showing. Maybe this is a sign of readers being capable to understand what the icons represent? Anyway, that's cool.

Thanks!

tl;dr: lazy loading for svg pending

certain icon libraries have different template rules during design causing inconsistent rendering

some icon libraries have what is called a bleed(several pixel buffer from the edge) baked into the icon(Material design icons 24px = 20px icon) which is the proper way to design them for ensure consistent rendering/scaling, however some chose not to do this and give you a 1:1 icon (font-awesome 14px = 14px)

https://codepen.io/hanakin/pen/pooQMqL

I would suggest scripting in a change for those that do not behave the same to be displayed at the desired size regardless of which icon library you are pulling from.

for exp scaling font-awesome size down by 4px or increasing the others size by 4px etc...

Also remove all of the vertical-align stuff as this is not necessary by default. This should be applied by classes depending on the use.

How to use own set of SVG files with @iconify/react?

We have a bunch of svg icons in a directory: a.svg, b.svg etc. They're our brand internal icons that are not meant to be released as a public icon set for now. I'd like to make an internal package out of them, and use the good core API @iconify/react package has to convert the icons into React components.

The end goal is that we could do this:

import { Icon } from '@iconify/react';
import ourLogo from 'our-internal-package/ourLogo';

But how can one build the our-internal-package? I checked into the iconify documentation and tooling, and found that this script is handy to convert svg files into a JSON bundle. However the bundle is large and we'd like to split it into individual files. When checking @iconify/icons-teenyicons package, each icon corresponds to two files, for example add-outline icon:

node_modules/@iconify/icons-teenyicons/add-outline.d.ts:

interface IconifyIcon {
    body: string;
	left?: number;
	top?: number;
	width?: number;
	height?: number;
	rotate?: number;
	hFlip?: boolean;
	vFlip?: boolean;
}
declare const data: IconifyIcon;
export default data;

node_modules/@iconify/icons-teenyicons/add-outline.js:

var data = {
	"body": "<g fill=\"none\"><path d=\"M7.5 1v13M1 7.5h13\" stroke=\"currentColor\"/></g>",
	"width": 15,
	"height": 15
};
exports.__esModule = true;
exports.default = data;

How can we turn the icons JSON bundle into a set of type definition and JS files, similar to how @iconify/teeny-icons is released?

spinning animation

Does Iconify come with a way to make an icon actively spin? If not then it might be worth considering.

I'm migrating one of our sites to Iconify, one of the most occurring icons is a spinning mdi-loading, using just materialdesignicons you would achieve it with mdi-spin:

<span class='mdi mdi-loading mdi-spin'></span>

My current implementation with Iconify is the following, which of course is fine on it's own:

.spin {
  animation-name: spin;
  animation-duration: 2000ms;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
}
@keyframes spin {
  from {
    transform:rotate(0deg);
  }
  to {
    transform:rotate(360deg);
  }
}

Add freeicons.io ?

Thanks for this big library ! Maybe adding freeicons.io would be a good candidate ?

Icon not showing in simple JavaScript

I am trying to use iconify but I cannot. Is this correct? Nothing shows for me. What should I do with Iconify after import? The documentation is very vauge.

import Iconify from '@iconify/iconify';
export function createIcon(iconName) {
  const icon = document.createElement("div");
  icon.innerHTML = `
    <span class="iconify" data-icon="${iconName}"></span>
  `
  return icon
}

Iconset request: Fluent System Icons

• https://github.com/microsoft/fluentui-system-icons

How to get a list of all collections in order to search for icons?

Hey there!

I was wondering how you made the search function on your documentation website.
I want to create a custom Advanced Custom Fields field (for WordPress) where users can search for icons in Iconify, similar to the existing FontAwesome Field add-on:

We have our own API set up. I'd like to know if there are any functions available in Iconify to get a list of all available collections. Do you just search for icons whose names contain the search parameter and return them?

Iconset Request: Teenyicons

https://github.com/teenyicons/teenyicons

Thanks for your hard work as always

web-component implementation

First congrats ! Id like to propose addition of web-component implementation which i think will be an added bonus .

CC License

The CC License doesn't exist. There are multiple different CC licenses.

Some icons report " CC 4.0" as "License", which means nothing, as in https://iconify.design/icon-sets/bx/bxs-network-chart.html. I suggest updating it once it gets fixed in the original source.

For that icon set, I opened an issue in atisawd/boxicons#111.

Iconset request

• https://github.com/modulz/radix-icons

This there any guide/example for how to contribute (make PRs) to adding new icon sets? Thanks.

Iconset Request

• https://github.com/tabler/tabler-icons, requested by @chrishrtmn in antfu-collective/icones#7
• https://github.com/CoreyGinnivan/system-uicons

Thanks a lot :)

use in the shadowDom (custom Element)

Thanks for your great work.

At this moment, I lost a way to apply iconify in the custom elements. Could you help me?

What I did;

1. I made a small and simple web component to display some messages on a page. I want to add some iconify icons in that custom element. 
2. Of course, I've properly loaded iconify js (2.0.0-beta) on the page at first.
3. Also surely, icons are displayed normally outside of my custom element.
4. Slot also works. Icons injected with slot in shadowDom from the outer page would work as expected.
5. I could render a specific iconify icon with Iconify.renderSVG() in the customElement. This was a very hopeful sign for me because Iconify.js seems working in shadowDom without import JS in each customElement. When I tried with Font-Awesome, I should have injected all CSS rules into shadowDom because there be some issue about @font-face source path

But....

I've found only slotted icon was rendered again correctly. Other's were not. Maybe my approach was totally wrong.
EDIT
Renderable icons seem being cached.

**Problem **

// index.html
<mz-test>
  <span slot="ic" class="iconify-inline" data-icon="mdi-ab-testing"></span>
</mz-test>

// mz-test shadowDom

<p id="test1">slotted icon: <slot name="ic"></slot></p>
<p id="test2">direct rendering icon slotted:</p>
<p id="test3">direct rendering icon unslotted:</p>
<p id="test4">how to auto-convert??: <span class="iconify" data-icon="noto:angry-face" data-inline="false"></span></p>

// Trying to rendering after connectedCallback
    var slotted = Iconify.renderHTML('mdi-ab-testing')
    var test2 = myShadowDom.querySelector('#test2')
    test2.innerHTML += slotted

    var unslotted = Iconify.renderHTML('mdi-account-box')
    var test3 = myShadowDom.querySelector('#test3')
    test3.innerHTML += unslotted

What is the best approach to use iconify in custom Element? Could you show some hint?

Error while installing iconify/icons-mdi version "1.0.149",

Context

While updating my package using npm this error shows up.

Already tried:

• Deleting node_modules and reinstalling
• Deleting package-lock.json and reinstalling
• npm rebuild
• npm cache clean --force

Current behavior

Expected

Installs/updates without an error

[Idea] An "animate" attribute

Hi,

I love Iconify, so thanks a lot for your work. This is awesome.

A feature I would really like to see is an animate attribute. We could set it to rotate, pulsing, jumping, etc. That would be useful to use it as a spinner, interesting effects on hover, or to get user's attention.

Cheers :)

Emoji to Iconify

Извините, что по-русски. Думаю, что не получится донести мысль с моим уровнем английского :(

Было бы удобно сделать базу соответствия иконок каким-либо эмодзи и соответственно их обрабатывать, т.е. пишем в коде:
<span class="iconify" data-collection="mdi">📝</span>
а в результате подставляется иконка из набора MDI
<span class="iconify" data-icon="mdi:clipboard-edit" data-inline="false"></span>

Таким образом, можно обыграть ситуацию, когда иконки из iconify по какой-то причине не подгрузились. Это будет лучше чем сейчас - пустота вместо иконок.

Icon set requests

• file-icons
• vscode-icons

They would be very useful for building apps with file lists or just indicating file types.

Thanks.

Add Mono Icons

Belgian company @mono-company just released https://icons.mono.company. It would be nice if they could be added.

https://github.com/mono-company/mono-icons

@iconify-icons/xxx vs @iconify/icons-xxx and SSR application.

Hi,

Today, I see all icon packages move to @iconify-icons/xxx instead of @iconify/icons-xxx
The @iconify-icons/xxx will crash in SSR, for example with Next.js.
Because NodeJS doesn't support ES modules syntax.

What happens if I'm still using the old@iconify/icons-xxx? Is it still up to date?

Hey, I would love to contribute!

Thanks for making this and I have used it for a while. Being an icon lover, this is definitely a lifesaver!

I would love to help with improving the functionality/design of the website. However, I did not find the repo of it, did I missed it, or do you have any plain in open sourcing it?

Thanks!

Animation

Hello, problem is in transform: rotate(360deg);
I using tailwind.css and if I use animate-spin class to span icon, style transform for svg, does not allow adding animation.

P.S.

.animate-spin{
animation: spin 1s linear infinite;
}

@keyframes spin {
from {
transform: rotate(0deg);
}   to {
transform: rotate(360deg);
} 

Using with Turbolinks: How to manually tell Iconify to insert icons?

I'm trying to use Iconify with Rails, which uses Turbolinks. The issue is, on a Turbolinks page load, Iconify doesn't load in icons. It only inserts the icons on a regular, full page load.

With Turbolinks, you can listen for a Turbolinks load:

document.addEventListener("turbolinks:load", function() {
  // ...
})

Is there an Iconify method I can put inside of that listener to tell it to insert the icons? Or is there another solution?

I'm using Iconify via yarn + webpack, but I've also tried just using the <script> tag. It doesn't seem to make a difference.

Warning using with Next.js server side rendering

Hi guys,

This is warning message:

Warning: Expected server HTML to contain a matching <span> in <div>

The problem same with @iconify/react

Inline style not working on 1.0.5

Hi, I just updated my load script to 1.0.5 and have noticed that inline styles are not working with the icons. If set on a parent tag the style works fine, also if set on a class using css the styles are fine too, but inline styles are definitely not working. I switched back to loading 1.0.4 and it's working fine.

For example using this line

<span class="iconify" data-icon="mdi:lock-outline" data-inline="false" style="font-size:170px;"></span>

Does not work using 1.0.5.

I'm loading the script for 1.0.5 from the cdn using :

<script src="https://code.iconify.design/1/1.0.5/iconify.min.js"></script>

As per the documentation. Have tested on a few different pages with the same results. Can someone confirm if this is the case for them please? Thanks

Continuous 'Loading icon finder...'

Using Sketch, the plugin opens but continues to load 'icon finder' to no end. The plugin was working fine at the beginning of my design session but randomly stopped working. I tried closing and reopening the plugin, and restarting Sketch (as instructed), I also rebooted my Mac but still no success.

Icons not showing bundled in Angular

I have created a bundle file of some Icons as described in this article:
https://iconify.design/docs/icon-bundles/. Everything went fine with that. Now when I use those icons in a static HTML file like in the guide then everything works fine. If I start using the icons in for example a ngIf directive then they do not show, there is not error in the console. It just does not get replaced with the SVG. If I move away from the bundle file and to the online version then the icons start showing again.

Custom SVG icon with '-' in the file name

I'm using this example: https://docs.iconify.design/sources/bundles/examples/svg-framework-full.html

It works great, except that a file like thumbs-up.svg, when bundled, the custom icon will have a name of just "up".
Is there way to keep the full name, so I can use the icon like
<span class="iconify-inline" data-icon="custom:thumbs-up"></span> instead of just ..."custom:up"... ?

Using iconify offline

I want to use iconify offline in a Nodejs app. However, I do not want to bundle only a few limited icons like how it is shown in https://iconify.design/docs/icon-bundles/.

I want iconify to work like how it works when it is online. Is there a way to do that? Can I specify a path or install a package, so iconify imports the icons on demand from the disk instead of downloading them?

The app is a tool-bar for Atom and provides a service for others to add buttons. Previously, we bundled some icon sets with the app, and others could choose the icon they wanted to show by just choosing the name.

Iconify script causes CSP violations

I'm working on a web app that uses the hosted iconify 1.0.4 script. I recently started sending Content Security Policy headers. This causes the iconify script to fail because it's attempting to apply an inline style dynamically.

To fix this, Chrome recommends either using the 'unsafe-inline' option, but that opens the door for everything and elsewhere they strongly recommend avoiding it. The other option is to us add a hash for the style. But if you look closely at the screenshot, the hash it recommends is already in my CSP.

Yeah, there's a bug in Chromium.

According to that bug, the real fix for now is to use 'unsafe-hashes' along with the hashes of the iconify scripts. In my case that ends up being script-src-attr 'unsafe-hashes' 'sha256-QlrbM8aOqzBK0DIi4eTKHWBQeoYW8/V+N7qXwMcKmqo='. That worked to address the errors. I'm still concerned about using 'unsafe-hashes' but it's way better than 'unsafe-inline'.

This might be worth adding to your documentation.

I haven't dug into the iconify script enough to understand whether the functionality that violates CSP is essential behavior or if there are workarounds that could be employed. So I thought I'd ask here.

Thanks!

@iconify/react - Side side rendering produces warnings due to replaceIDs functionality

The @iconfiy/react package has a function that replaces all IDs with a combination of a randomly generated value and a counter value.

When using this library with server side rendering, this causes a HTML content mismatch between the client and server.

Possible solutions could be:

• Allow users to pass an id to the Icon component that will override the randomly generated id.
• Allow the user to pass in their own replaceIds function as a prop to component
• Change the ID generation to be deterministic

Can not connect to server https://code.iconify.design/

Question about the location of files

Does this package upload a JS file to the site and that's it?
Does it not save local copies of icon files?

In the Russian Federation, RosKomNadzor often blocks access to various IP addresses, trying to block access to Telegram. This can cause the inaccessibility of the destination server with icons, so it is extremely important to store them locally on the site.
Package can it?

Also interested in how it works with purifyCss?

[Feature request] Need an addIcons function

feature

usually ,we add a entry icon-project in project , but use addIcon function to add icons is too difficult

so i design an addIcons function

here is the api

<template>
  <div>
    <Icon icon="minus-circle" />
  </div>
</template>

<script>
// Import component and addIcons function
import { Icon, addIcons } from '@iconify/vue';

// Import entry icon data.
import bx from '@iconify/json/json/bx.json';

// Assign all data
addIcons(bx, /bx-/);

export default {
  components: {
		Icon
	}
}
</script>

design

vue component add code

export function addIcons(data: IconifyJSON, reg: RegExp) {
	let iconfiyIcons: IconifyIcons = data.icons;
	for (let key in iconfiyIcons) {
		const keywordMatch = reg ? key.replace(reg, '') : key
		storage[keywordMatch] = fullIcon(
			Object.assign(iconfiyIcons[key], {
				height: data.height,
				width: data.width,
			})
		);
	}
}

ty for your time and i would love to contribute !

use in Vanilla JS

Can the icons work without any JS frameworks?

I installed @iconify/iconify package, but I'm stuck at how to use it.

CSS Classes and issues with alignment

Thanks for making this!

I think life would be easier if the svg had a class of the icon name?
Instead we have to use
svg[data-icon="ic:round-access-time"]

which is much harder to write than:
.ic-round-access-time

And most of the time I wrap the svg in a span. Would be nice if there was a way to auto wrap it with data-wrap="span" or something. And the span can have the class.

Last, when using the inline method I find that the icon is randomly off here and there... its strange..

Notice the top one is different than the lower ones. All have the same markup and css.

For now I am setting inline false and using css to move it around.

Request to add new icons

Some important python libraries icons are missing, such as numpy and scikit-learn.

How is the process of adding new icons?

A cookie associated with a cross-site resource was set without the `SameSite` attribute

Got this warning message in Chrome, wondering if its going to be an issue in the future?

A cookie associated with a cross-site resource at http://iconify.design/ was set without the SameSite attribute. A future release of Chrome will only deliver cookies with cross-site requests if they are set with SameSite=None and Secure. You can review cookies in developer tools under Application>Storage>Cookies and see more details at https://www.chromestatus.com/feature/5088147346030592 and https://www.chromestatus.com/feature/5633521622188032.

Environment:
Angular 8.2.0
Chrome 78.0
Windows 10
iconify 1.0.3

Thanks a lot

<Icon /> does not forward the ref

I should get the svg dom element in the ref.

Demo:

https://9ghol.csb.app/

index.js:27 Warning: Function components cannot be given refs. Attempts to access this ref will fail. Did you mean to use React.forwardRef()?

Check the render method of `App`.
    at Icon$1 (https://9ghol.csb.app/node_modules/@iconify/react-with-api/dist/icon.esm.js:2054:10)
    at div
    at App (https://9ghol.csb.app/src/App.js:24:34)

Provide documentation on how to change icon after it loaded

After an icon is loaded with the default: <span class="iconify" data-icon="noto:bird"></span> it's not easily possible to change this icon into another one. It looks like iconify does not react to any further changes to the data-icon attribute. I tried changing the data-icon attribute using JS (specifically Angular, but it's more a general thing) after an icon is loaded, but it just stays the same and nothing happens.

Any guidance on how one should do this or is this an improvement you would consider?

Feature Request: Support for title attribute

Feature request to support the title attribute.
E.g.
<i class="iconify" data-icon="ic:baseline-favorite-border" data-width="24px" title="Favorite"></i>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" width="24px" height="24px" style="vertical-align: -0.125em;-ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg);" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" _ngcontent-c8="" class="iconify ng-tns-c8-0 ng-star-inserted" data-icon="ic:baseline-favorite-border" data-width="24px" title="Favorite"><path d="M16.5 3c-1.74 0-3.41.81-4.5 2.09C10.91 3.81 9.24 3 7.5 3 4.42 3 2 5.42 2 8.5c0 3.78 3.4 6.86 8.55 11.54L12 21.35l1.45-1.32C18.6 15.36 22 12.28 22 8.5 22 5.42 19.58 3 16.5 3zm-4.4 15.55l-.1.1-.1-.1C7.14 14.24 4 11.39 4 8.5 4 6.5 5.5 5 7.5 5c1.54 0 3.04.99 3.57 2.36h1.87C13.46 5.99 14.96 5 16.5 5c2 0 3.5 1.5 3.5 3.5 0 2.89-3.14 5.74-7.9 10.05z" fill="currentColor"></path></svg>

SVG element does support title.
https://developer.mozilla.org/en-US/docs/Web/SVG/Element/title

Pro icon packs

Hey there!

Is it or will it be possible to use pro packs (specifically Font Awesome)?
I've got a pro license so I would like to use all available icons.

Thanks!

getting icons list as json

hey there.
this projects looks promising.
I was looking for a way to get icons list of an iconset in json. e.g. material icons or font awesome full icons list. I couldn't find it in docs. or maybe I didn't read carefully 😅
is there a way for this?

thank you

Typescript support

Does it work with Typescript? i'm getting the declaration types error and can't find the correspondent @types.