Fix icon not loading

astro.config.mjs

@@ -19,6 +19,10 @@ export default defineConfig({
         prefetch(),
         partytown(),
         mdx(),
-        icon(),
+        icon({
+            include: {
+                heroicons: ['*'], // Loads entire Material Design Icon set
+            },
+        }),
     ],
 })

package.json

@@ -10,11 +10,9 @@
         "astro": "astro"
     },
     "dependencies": {
-        "@astrojs/markdown-remark": "^2.2.1",
         "@astrojs/mdx": "^0.19.7",
         "@astrojs/partytown": "^1.2.3",
         "@astrojs/prefetch": "^0.2.3",
-        "@astrojs/prism": "^2.1.2",
         "@astrojs/sitemap": "^1.3.3",
         "@astrojs/tailwind": "^4.0.0",
         "@fontsource-variable/jetbrains-mono": "^5.0.5",
@@ -26,6 +24,7 @@
         "tailwindcss-hero-patterns": "^0.1.2"
     },
     "devDependencies": {
+        "@iconify-json/heroicons": "^1.1.11",
         "@typescript-eslint/parser": "^5.61.0",
         "astro-icon": "1.0.0-next.2",
         "autoprefixer": "^10.4.14",
@@ -39,7 +38,6 @@
         "eslint-plugin-jsx-a11y": "^6.7.1",
         "eslint-plugin-tailwindcss": "^3.13.0",
         "find-up": "^6.3.0",
-        "postcss": "8.4.25",
         "prettier": "^2.8.8",
         "prettier-plugin-astro": "^0.10.0",
         "prettier-plugin-sort-imports": "^1.7.2",

src/components/ButtonSecondary.astro

@@ -1,5 +1,5 @@
 ---
-import { Icon } from 'astro-icon'
+import { Icon } from 'astro-icon/components'
 export interface Props {
     link: string
     icon?: string