Error: Unable to locate the "mdi" icon set!

[xkeshav]

What version of astro-icon are you using?

1.0.0

Astro Info

Astro                    v4.0.7
Node                     v18.17.1
System                   Windows (x64)
Package Manager          unknown
Output                   static
Adapter                  none
Integrations             @astrojs/mdx
                         @astrojs/tailwind
                         @astrojs/sitemap
                         astro-icon

If this issue only occurs in one browser, which browser is a problem?

chrome

Describe the Bug

when run npm run dev ; it runs but when access in chrome; it crashed with below error in terminal

D:/Developer/astro-theme-cactus/node_modules/astro-icon/components/Icon.astro:57
    const err = new Error(`Unable to locate the "${setName}" icon set!`);
                ^

Error: Unable to locate the "mdi" icon set!
    at eval (D:/Developer/astro-theme-cactus/node_modules/astro-icon/components/Icon.astro:57:17)
    at AstroComponentInstance.Icon [as factory] (D:/Developer/astro-theme-cactus/node_modules/astro/dist/runtime/server/astro-component.js:21:12)
    at AstroComponentInstance.init (D:/Developer/astro-theme-cactus/node_modules/astro/dist/runtime/server/render/astro/instance.js:39:29)
    at AstroComponentInstance.render (D:/Developer/astro-theme-cactus/node_modules/astro/dist/runtime/server/render/astro/instance.js:44:18)
    at Object.render (D:/Developer/astro-theme-cactus/node_modules/astro/dist/runtime/server/render/component.js:342:22)
    at Module.renderChild (D:/Developer/astro-theme-cactus/node_modules/astro/dist/runtime/server/render/any.js:36:17) {
  hint: 'It looks like the "mdi" set is not included in your configuration.\n' +
    '\n' +
    'Do you need to add the "mdi" set?'
}

Node.js v18.17.1

### package.json

```json
	"dependencies": {
		"@astrojs/mdx": "2.0.0",
		"@astrojs/rss": "4.0.1",
		"@astrojs/sitemap": "3.0.3",
		"@astrojs/tailwind": "5.0.3",
		"@iconify-json/mdi": "^1.1.63",
		"astro": "4.0.3",
		"astro-icon": "^1.0.0",
		"rehype-external-links": "^3.0.0",
		"satori": "0.10.11",
		"satori-html": "^0.3.2",
		"sharp": "^0.33.0"
	},

here is the code I have written

```js
import icon from "astro-icon";

export default defineConfig({
 
  integrations: [
    icon()
  ]
})

import { Icon } from "astro-icon/components";

/**
	Uses https:/natemoo-re/astro-icon#readme
	Find icons @ https://icones.js.org/
*/
const socialLinks: Array<{
  name: string;
  friendlyName: string;
  link: string;
}> = [
  {
    name: "mdi:github",
    friendlyName: "Github",
    link: "https:/xkeshav",
  },
  {
    name: "mdi:twitter",
    friendlyName: "Twitter",
    link: "https://twitter.com/xkeshav",
  },
  {
    name: "mdi:linkedin",
    friendlyName: "LinkedIn",
    link: "https://linkedin.com/in/xkeshav"
  }
];
---

<div class="flex flex-wrap items-end gap-x-4">
  <p>Find me on</p>
  <ul class="flex flex-1 items-center gap-x-2 sm:flex-initial">
    {
      socialLinks.map(({ link, name, friendlyName }) => (
        <li class="flex">
          <a class="inline-block p-1 sm:hover:text-link" href={link} target="_blank" rel={`noopener noreferrer`}>
            <Icon class="h-6 w-6" name={name} aria-hidden="true" focusable="false" />
            <span class="sr-only">{friendlyName}</span>
          </a>
        </li>
      ))
    }
  </ul>
</div>

What's the expected result?

it should render icon properly

earlier version 0.8.2 was working fine without adding icon in integration

Link to Minimal Reproducible Example

N/A

[koyuawsmbrtn]

Same with simple-icons. Got it referenced in my Astro config and everything, even checked if I installed the package. Nothing.

[xkeshav]

Same with simple-icons. Got it referenced in my Astro config and everything, even checked if I installed the package. Nothing.

Yes. Tried that too. Now switched back to 0.8.2

[diploidal]

I'm getting the same issue after updating to 1.0.0.

Tried with additional Configuration from docs but it did nothing.

Guess it is time to switch back to 0.8.2 for now. 😞

[Pukimaa]

I'm currently not spending a lot of time with web dev, but I'll try my best to try to replicate this soon!

[roryclaasen]

I'm having this same issue while using pnpm. But I have been able to resolve the issue by by moving all the @iconify-json/* packages to dependencies.

Some more context to the issue that I'm experiencing, when I run pnpm list --json manually I see all three dependency sections.

[
  {
    ...,
    "dependencies": { ... },
    "devDependencies": { ... },
    "unsavedDependencies": { ... }
  }
]

However when this package runs the command (loadIconifyCollections.ts#L102), text doesn't contain the devDependencies section.

[
  {
    ...,
    "dependencies": { ... },
    "unsavedDependencies": { ... }
  }
]

I haven't looked any further as to why there is a difference as moving the packages out of devDependencies has resolved this for me

[natemoo-re]

Please include a minimal reproduction! It's a required field because it's not possible for me to fix the issue if I'm not able to check what is going wrong with your specific setup.

I'll try to debug this with the information that's been shared so far.

[Pukimaa]

@xkeshav you haven't included the mdi icon pack in your config like described at https://www.astroicon.dev/reference/configuration/#include. Maybe try that? I did that and I'm getting a different error than yours now (It looks like the "[pack]" set was not loaded. Did you install the "@iconify-json/[pack]" dependency?)

[xkeshav]

@xkeshav you haven't included the mdi icon pack in your config like described at https://www.astroicon.dev/reference/configuration/#include. Maybe try that? I did that and I'm getting a different error than yours now (It looks like the "[pack]" set was not loaded. Did you install the "@iconify-json/[pack]" dependency?)

I have added; see package.json content I have shared.

also tried installing with dependency instead of devDependencies but didn't work

[Pukimaa]

I was thinking about the include statement in the astro config, but that doesn't seem to fix it either. However I shared a (temporary) fix in #173!

[koyuawsmbrtn]

That should go into your Astro config. Then my issue is a different one, because even after that it doesn't work.

[koyuawsmbrtn]

Oh and don't forget to install the proper @iconify-json/* pack. But still after that it doesn't work.

[Pukimaa]

That should go into your Astro config. Then my issue is a different one, because even after that it doesn't work.

Yes, although normally it also checks for your packages without specificially telling the integration what icon packs to use. I think your issue is similiar to #173 / #165