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
}

[cyberalien]

There are big changes in beta 4 that has just been released, which can solve your problem differently. You don’t really need it, but I think it is worth mentioning if it helps anyone else to solve similar issue.

In original message you wanted Iconify to replace icons in node that isn’t attached to DOM. It wasn’t possible in old version because Iconify scanned only body. Now it is possible.

Method 1 can scan node once, do not watch it for changes: Iconify.scan(node).

Method 2 will scan node and will observe it for changes: Iconify.observe(node). To remove observer, use Iconify.stopObserving(node).

[cyberalien]

I forgot that in version 2 I’ve already added function similar to createElement: renderSVG

export function createIconElement(icon) {
  return Iconify.renderSVG(icon);
}

It will return null if icon does not exist, which would usually complicate things a bit, however because you also want offline usage, this is not an issue because icon should always exist.

If you want to make sure an element is always returned, even when icon is missing, use this:

export function createIconElement(icon) {
  return Iconify.iconExists(icon) ? Iconify.renderSVG(icon) : document.createElement('span');
}

As for offline use, best option is to create a bundle.

In your test files I’ve made build-iconify.js in root directory that creates lib/iconify-bundle.js:

const fs = require("fs");
const iconFinder = require("@iconify/json");

// Source file for Iconify
const iconifySource = "@iconify/iconify/dist/iconify.without-api";

// Bundle file
const outputFile = "./lib/iconify-bundle.js";

// Icon sets to load. Key = prefix in Iconify sets, value = prefix in output
const iconSets = {
  octicon: "octicon",
  ion: "ion",
  foundation: "fi", // Rename "foundation" to "fi"
  "icomoon-free": "icomoon", // Rename "icomoon-free" to "icomoon"
  mdi: "mdi",
  ic: "ic",
  "fa-brands": "fab", // Rename "fa-brands" to "fab"
  fa: "fa",
};

// Bundle Iconify
const resolvedIconify = require.resolve(iconifySource);
let bundle = fs.readFileSync(resolvedIconify, "utf8");

// Bundle icon sets
Object.keys(iconSets).forEach((prefix) => {
  const source = iconFinder.locate(prefix);
  if (!source) {
    throw new Error(`Unable to locate icon set "${prefix}"`);
  }
  const data = JSON.parse(fs.readFileSync(source, "utf8"));

  // Remove useless metadata
  ["info", "categories", "themes", "chars"].forEach((attr) => {
    delete data[attr];
  });

  // Change prefix
  data.prefix = iconSets[prefix];

  // Add to bundle
  bundle += "\nIconify.addCollection(" + JSON.stringify(data) + ");";
});

// Save bundle
fs.writeFileSync(outputFile, bundle, "utf8");
console.log(`Saved ${outputFile} (${bundle.length} bytes)`);

// Try to copy .d.ts
const tsSource = resolvedIconify.replace(".js", ".d.ts");
try {
  const tsContent = fs.readFileSync(tsSource);
  fs.writeFileSync(outputFile.replace(".js", ".d.ts"), tsContent);
} catch (err) {
  //
}

Install @iconify/json as dev dependency, run node build-iconify.

Then I’ve replaced lib/icon-service/iconify.js with this:

import Iconify from "../iconify-bundle";

export function createIconElement(icon) {
  return Iconify.iconExists(icon) ? Iconify.renderSVG(icon) : document.createElement('span');
}

// the icon property will be passed into createIconElement automatically
export const testIcons = [
  { icon: "ic:baseline-access-time", color: "yellow" },
  { icon: "mdi:content-save", color: "red" },
];

Bundle is 7.35mb in size, which I think is reasonable considering that it includes multiple icon sets.

In build-iconify.js change icon sets list as needed. Because you have prefixes for icon sets that are sometimes different from ones used in Iconify, I’ve made variable iconSet an object, where key is Iconify prefix, value is prefix you want to use.

Few notes about icon sets:

• Do not use FontAwesome, especially version 4. Version 4 was imported from icon font, icons have very inconsistent spacing and might look terrible. Version 5 is better, but still doesn’t follow any sensible grid. It is a badly designed icon set.
• IonIcons you’ve listed use “ios-” and “md-” prefixes. That’s outdated version of IonIcons. New version no longer uses prefixes. Good news is Iconify icon set does include icons with those prefixes, so it will work. Iconify used to include those icons a while ago, crawler instead of removing icons makes them hidden, so old icons are always available in any icon set.