@inglorious/ui 7.8.0 → 8.0.0

package/README.md

@@ -44,6 +44,26 @@ The public CSS exports are:
 - `@inglorious/ui/themes/bootstrap.css`
 - `@inglorious/ui/all.css`
 
+## Icons
+
+`Icon` draws icons from any [Iconify](https://icon-sets.iconify.design/) set as inline SVG: no icon font to load, and only the icons you import end up in the bundle. Install a set and import each icon as its own module:
+
+```bash
+pnpm add @iconify-icons/material-symbols
+```
+
+```javascript
+import { Icon } from "@inglorious/ui/icon"
+import arrowBack from "@iconify-icons/material-symbols/arrow-back"
+import settingsOutline from "@iconify-icons/material-symbols/settings-outline"
+
+Icon.render({ icon: settingsOutline, size: "lg" })
+```
+
+The variant is part of the name: in Material Symbols the plain name is filled and `-outline` outlined, with `-rounded` and `-sharp` styles too. Font Awesome is `@iconify-icons/fa7-solid`, `fa7-regular` and `fa7-brands`; Lucide is `@iconify-icons/lucide`. Without `icon`, `Icon` shows its `children`: an emoji, a glyph, your own SVG.
+
+An icon is decorative unless it has a `label`, which makes it an image with that name for assistive technology.
+
 ## Right-to-left
 
 The components mirror in a right-to-left page (`<html dir="rtl">`, which `@inglorious/i18n` sets for Arabic, Hebrew and the like): their spacing, borders and corners use logical properties, and a `left` drawer sits at the start of the line.
@@ -59,10 +79,7 @@ For your own styles, use logical properties too (`margin-inline-start`, `inset-i
 Icons that point along the line, such as a back arrow or a chevron, take the `direction` of the text they sit in and are mirrored with `"rtl"`. With `@inglorious/i18n`, that is the i18n entity's `dir`:
 
 ```javascript
-MaterialIcon.render({
-  name: "arrow_back",
-  direction: api.getEntity("i18n").dir,
-})
+Icon.render({ icon: arrowBack, direction: api.getEntity("i18n").dir })
 ```
 
 ## Safe-area utilities

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "7.8.0",
+  "version": "8.0.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -169,11 +169,6 @@
       "import": "./src/data-display/list/index.js"
     },
     "./list.css": "./src/data-display/list/style.css",
-    "./material-icon": {
-      "types": "./types/data-display/material-icon.d.ts",
-      "import": "./src/data-display/material-icon/index.js"
-    },
-    "./material-icon.css": "./src/data-display/material-icon/style.css",
     "./table": {
       "types": "./types/data-display/table.d.ts",
       "import": "./src/data-display/table/index.js"
@@ -312,8 +307,10 @@
     "@inglorious/web": "6.6.0"
   },
   "devDependencies": {
-    "@fontsource/material-symbols-outlined": "^5.3.5",
-    "@fortawesome/fontawesome-free": "^7.3.1",
+    "@iconify-icons/fa7-brands": "^2.0.0",
+    "@iconify-icons/fa7-regular": "^2.0.0",
+    "@iconify-icons/fa7-solid": "^2.0.0",
+    "@iconify-icons/material-symbols": "^2.0.6",
     "@inglorious/eslint-config": "1.1.2",
     "@inglorious/store": "11.0.3",
     "@inglorious/vite-plugin-jsx": "2.0.3",
@@ -323,7 +320,6 @@
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",
     "jsdom": "^30.0.1",
-    "lucide": "^1.41.0",
     "prettier": "^3.9.6",
     "storybook": "^10.6.0",
     "vite": "^8.2.2",

package/src/data-display/avatar/style.css

@@ -1,13 +1,10 @@
 .iw-avatar {
   display: inline-grid;
   place-items: center;
-  width: 2rem;
-  height: 2rem;
   flex: 0 0 auto;
   border-radius: 999px;
   background: var(--iw-color-bg-secondary);
   color: var(--iw-color-text);
-  font-size: var(--iw-font-size-sm);
   font-weight: var(--iw-font-weight-medium);
   line-height: 1;
   overflow: hidden;
@@ -21,11 +18,19 @@
   &.iw-avatar-sm {
     width: 1.5rem;
     height: 1.5rem;
+    font-size: var(--iw-font-size-xs);
+  }
+
+  &.iw-avatar-md {
+    width: 2rem;
+    height: 2rem;
+    font-size: var(--iw-font-size-sm);
   }
 
   &.iw-avatar-lg {
     width: 3rem;
     height: 3rem;
+    font-size: var(--iw-font-size-base);
   }
 
   &.iw-avatar-square {

package/src/data-display/avatar/template.js

@@ -32,7 +32,7 @@ export function render(props) {
     color === "auto" && !hasCustomBackground ? "default" : color
   const classes = {
     "iw-avatar": true,
-    [`iw-avatar-${size}`]: size !== "md",
+    [`iw-avatar-${size}`]: true,
     [`iw-avatar-${shape}`]: shape !== "circle",
     [`iw-avatar-color-${resolvedColor}`]:
       resolvedColor !== "default" && !hasCustomBackground,

package/src/data-display/data-display.css

@@ -7,7 +7,6 @@
 @import "./divider/style.css";
 @import "./icon/style.css";
 @import "./list/style.css";
-@import "./material-icon/style.css";
 @import "./table/style.css";
 @import "./tooltip/style.css";
 @import "./typography/style.css";

package/src/data-display/icon/icon-implementations.mdx

@@ -4,160 +4,63 @@ import { Meta } from "@storybook/addon-docs/blocks"
 
 <div className="iw-theme-content">
 
-# Icon Implementations
-
-Use this page as a quick reference for supported icon strategies in `@inglorious/ui`.
-
 <style>{`
-  .iw-icon-tabs { display: grid; gap: 0.75rem; }
-  .iw-icon-tabs > input { position: absolute; opacity: 0; pointer-events: none; }
-  .iw-icon-tab-labels { display: flex; flex-wrap: wrap; gap: 0.5rem; }
-  .iw-icon-tab-labels label {
-    border: 1px solid var(--iw-color-border);
-    border-radius: var(--iw-radius-md);
-    background: var(--iw-color-bg-secondary);
-    color: var(--iw-color-text);
-    padding: 0.35rem 0.65rem;
-    cursor: pointer;
-    font-size: 0.875rem;
-  }
-  .iw-icon-tab-panels {
-    border: 1px solid var(--iw-color-border);
-    border-radius: var(--iw-radius-md);
-    background: var(--iw-color-surface);
-    padding: 0.85rem;
-  }
-  .iw-icon-tab-panel { display: none; line-height: 1.45; }
-  #iw-icon-tab-generic:checked ~ .iw-icon-tab-panels .iw-icon-tab-panel-generic,
-  #iw-icon-tab-svg:checked ~ .iw-icon-tab-panels .iw-icon-tab-panel-svg,
-  #iw-icon-tab-material:checked ~ .iw-icon-tab-panels .iw-icon-tab-panel-material,
-  #iw-icon-tab-fa:checked ~ .iw-icon-tab-panels .iw-icon-tab-panel-fa,
-  #iw-icon-tab-lucide:checked ~ .iw-icon-tab-panels .iw-icon-tab-panel-lucide,
-  #iw-icon-tab-a11y:checked ~ .iw-icon-tab-panels .iw-icon-tab-panel-a11y { display: block; }
-  #iw-icon-tab-generic:checked ~ .iw-icon-tab-labels label[for="iw-icon-tab-generic"],
-  #iw-icon-tab-svg:checked ~ .iw-icon-tab-labels label[for="iw-icon-tab-svg"],
-  #iw-icon-tab-material:checked ~ .iw-icon-tab-labels label[for="iw-icon-tab-material"],
-  #iw-icon-tab-fa:checked ~ .iw-icon-tab-labels label[for="iw-icon-tab-fa"],
-  #iw-icon-tab-lucide:checked ~ .iw-icon-tab-labels label[for="iw-icon-tab-lucide"],
-  #iw-icon-tab-a11y:checked ~ .iw-icon-tab-labels label[for="iw-icon-tab-a11y"] {
-    border-color: var(--iw-color-primary);
-    box-shadow: inset 0 0 0 1px var(--iw-color-primary);
-  }
-  .iw-icon-example { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1.5rem; margin-top: 0.35rem; }
-  .iw-material-symbol {
-    font-family: "Material Symbols Outlined";
-    font-weight: 400;
-    font-style: normal;
-    font-size: 1.5rem;
-    line-height: 1;
-    letter-spacing: normal;
-    text-transform: none;
-    display: inline-block;
-    white-space: nowrap;
-    word-wrap: normal;
-    direction: ltr;
-    font-feature-settings: "liga";
-    -webkit-font-smoothing: antialiased;
-  }
   .iw-theme-content { background: var(--iw-color-bg, #ffffff); color: var(--iw-color-text, #000000); padding: 1rem; border-radius: var(--iw-radius-md); }
-  .iw-theme-content h1, .iw-theme-content p, .iw-theme-content li, .iw-theme-content pre, .iw-theme-content code { background: var(--iw-color-surface, #ffffff); color: var(--iw-color-text, #000000); }
+  .iw-theme-content h1, .iw-theme-content h2, .iw-theme-content p, .iw-theme-content li, .iw-theme-content pre, .iw-theme-content code { color: var(--iw-color-text, #000000); }
 `}</style>
 
-<div className="iw-icon-tabs">
-  <input id="iw-icon-tab-generic" type="radio" name="iw-icon-tab" defaultChecked />
-  <input id="iw-icon-tab-svg" type="radio" name="iw-icon-tab" />
-  <input id="iw-icon-tab-material" type="radio" name="iw-icon-tab" />
-  <input id="iw-icon-tab-fa" type="radio" name="iw-icon-tab" />
-  <input id="iw-icon-tab-lucide" type="radio" name="iw-icon-tab" />
-  <input id="iw-icon-tab-a11y" type="radio" name="iw-icon-tab" />
-
-<div className="iw-icon-tab-labels">
-  <label htmlFor="iw-icon-tab-generic">Generic</label>
-  <label htmlFor="iw-icon-tab-svg">Inline SVG</label>
-  <label htmlFor="iw-icon-tab-material">Material</label>
-  <label htmlFor="iw-icon-tab-fa">Font Awesome</label>
-  <label htmlFor="iw-icon-tab-lucide">Lucide</label>
-  <label htmlFor="iw-icon-tab-a11y">Accessibility</label>
-</div>
+# Icon Implementations
 
-  <div className="iw-icon-tab-panels">
-    <section className="iw-icon-tab-panel iw-icon-tab-panel-generic">
-      <p>Use <code>@inglorious/ui/icon</code> for glyphs, emoji, and simple symbols. Reference: <a href="/?path=/story/data-display-icon--unicode">UTF-8 Icons</a></p>
-      <pre><code>{`Icon.render({ children: "★", size: "md", color: "primary" })`}</code></pre>
-      <div className="iw-icon-example">★ ⚑ ♫</div>
-    </section>
-
-    <section className="iw-icon-tab-panel iw-icon-tab-panel-svg">
-      <p>Use inline SVG when you want a custom icon pack without font dependencies.</p>
-      <pre><code>{`Icon.render({
-    children: html\`<svg viewBox="0 0 24 24" ...>...</svg>\`,
-    size: "md",
-
-})`}</code></pre>
-
-<div className="iw-icon-example">
-<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-<path d="M12 2v20M2 12h20" stroke="currentColor" strokeWidth="2" strokeLinecap="round" />
-</svg>
-<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-<path d="M3 12l6 6 12-12" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-</svg>
-<svg width="22" height="22" viewBox="0 0 24 24" fill="none" aria-hidden="true">
-<path d="M12 21s-7-4.35-9-8.5C1.25 8.6 3.8 5 7.6 5c2.1 0 3.4 1.1 4.4 2.5C13 6.1 14.3 5 16.4 5 20.2 5 22.75 8.6 21 12.5 19 16.65 12 21 12 21Z" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" />
-</svg>
-</div>
-</section>
-
-    <section className="iw-icon-tab-panel iw-icon-tab-panel-material">
-      <p>Use <code>@inglorious/ui/material-icon</code> when Material Symbols fonts are loaded. Reference: <a href="https://fonts.google.com/icons?icon.set=Material+Symbols&icon.style=Outlined" target="_blank">Material Symbols</a></p>
-      <pre><code>{`MaterialIcon.render({ name: "home", isFilled: true, size: "md" })`}</code></pre>
-      <div className="iw-icon-example">
-        <span className="iw-material-symbol" aria-hidden="true">home</span>
-        <span className="iw-material-symbol" aria-hidden="true">settings</span>
-        <span className="iw-material-symbol" aria-hidden="true">favorite</span>
-      </div>
-    </section>
-
-    <section className="iw-icon-tab-panel iw-icon-tab-panel-fa">
-      <p>Load Font Awesome CSS globally, then pass an icon element as <code>children</code>. Reference: <a href="https://fontawesome.com/search" target="_blank">Font Awesome Icons</a></p>
-      <pre><code>{`Icon.render({
-    children: html\`<i class="fa-solid fa-user" aria-hidden="true"></i>\`,
-
-})`}</code></pre>
-
-<div className="iw-icon-example">
-<i className="fa-solid fa-user" aria-hidden="true"></i>
-<i className="fa-solid fa-gear" aria-hidden="true"></i>
-<i className="fa-solid fa-heart" aria-hidden="true"></i>
-</div>
-</section>
-
-    <section className="iw-icon-tab-panel iw-icon-tab-panel-lucide">
-      <p>Lucide requires runtime bootstrapping before icons render. Reference: <a href="https://lucide.dev/icons/?focus" target="_blank">Lucide Icons</a></p>
-      <pre><code>{`import { createIcons, icons } from "lucide"
-
-createIcons({
-icons,
-attrs: { "stroke-width": 1.75 },
-})`}</code></pre>
-      <p>Then render nodes such as <code>{`<i data-lucide="user"></i>`}</code>.</p>
-
-<div className="iw-icon-example">
-<i data-lucide="user" aria-hidden="true"></i>
-<i data-lucide="settings" aria-hidden="true"></i>
-<i data-lucide="heart" aria-hidden="true"></i>
-</div>
-</section>
+`Icon` draws icons as inline SVG. No icon font is loaded, so nothing waits on a download and only the icons an app imports end up in its bundle.
 
-    <section className="iw-icon-tab-panel iw-icon-tab-panel-a11y">
-      <ul>
-        <li>Decorative icons: use <code>aria-hidden="true"</code>.</li>
-        <li>Meaningful icons: include an <code>aria-label</code> or visible text.</li>
-        <li>Do not rely on icon shape alone for state; pair with text/color contrast.</li>
-      </ul>
-      <p>Unicode glyph explorer lives in the <strong>Data Display/Icon/Unicode</strong> story.</p>
-    </section>
+## Icon sets
+
+Any set published by [Iconify](https://icon-sets.iconify.design/) works in the same way: install the set, import each icon as its own module, pass it as `icon`.
+
+```bash
+pnpm add @iconify-icons/material-symbols
+```
+
+```javascript
+import { Icon } from "@inglorious/ui/icon"
+import arrowBack from "@iconify-icons/material-symbols/arrow-back"
+import settingsOutline from "@iconify-icons/material-symbols/settings-outline"
+
+Icon.render({ icon: arrowBack, size: "lg" })
+```
+
+The icon is one em square, so `size` sets it, and it takes the color of the text unless `color` says otherwise.
+
+| Set                                                           | Package                                                 | Example imports                                                               |
+| ------------------------------------------------------------- | ------------------------------------------------------- | ----------------------------------------------------------------------------- |
+| [Material Symbols](https://fonts.google.com/icons)            | `@iconify-icons/material-symbols`                       | `settings` (filled), `settings-outline`, `settings-rounded`, `settings-sharp` |
+| [Font Awesome 7 Free](https://fontawesome.com/search?ic=free) | `@iconify-icons/fa7-solid`, `fa7-regular`, `fa7-brands` | `user`, `heart`, `instagram`                                                  |
+| [Lucide](https://lucide.dev/icons/)                           | `@iconify-icons/lucide`                                 | `user`, `settings`, `heart`                                                   |
+
+The variant is part of the name, not a prop: in Material Symbols the plain name is the filled icon and `-outline` the outlined one. Font Awesome's icons are under CC BY 4.0, which asks for attribution.
+
+## Glyphs and custom markup
+
+Without `icon`, `children` is shown instead: an emoji, a Unicode glyph, or SVG of your own.
+
+```javascript
+Icon.render({ children: "★", size: "lg" })
+```
+
+The Unicode glyph explorer is in the **Data Display/Icon/Unicode** story.
+
+## Direction
+
+An icon that points along the line, such as a back arrow or a chevron, should point the other way in right-to-left text. Pass the direction of the text it sits in; with `@inglorious/i18n`, that is the i18n entity's `dir`:
+
+```javascript
+Icon.render({ icon: arrowBack, direction: api.getEntity("i18n").dir })
+```
+
+## Accessibility
+
+- An icon is decorative by default: it is hidden from assistive technology.
+- An icon that means something on its own, with no text next to it, takes a `label`: it is then announced as an image with that name. On an icon-only button, label the button instead.
+- Do not rely on an icon's shape alone for state; pair it with text or color contrast.
 
-</div>
-</div>
 </div>

package/src/data-display/icon/icon.stories.js

@@ -1,3 +1,9 @@
+import addressBookRegular from "@iconify-icons/fa7-regular/address-book"
+import addressBookSolid from "@iconify-icons/fa7-solid/address-book"
+import arrowBack from "@iconify-icons/material-symbols/arrow-back"
+import settingsFilled from "@iconify-icons/material-symbols/settings"
+import settingsOutline from "@iconify-icons/material-symbols/settings-outline"
+
 import { createRender } from "../../stories/notifyStory.js"
 import { Icon } from "."
 
@@ -6,7 +12,26 @@ export default {
   tags: ["autodocs"],
   render: createRender(Icon),
   argTypes: {
-    children: { control: "text", description: "Icon glyph or inline content." },
+    icon: {
+      control: false,
+      description:
+        "An Iconify icon, imported from a set such as `@iconify-icons/material-symbols`.",
+    },
+    children: {
+      control: "text",
+      description: "Shown when there is no `icon`: a glyph or inline content.",
+    },
+    direction: {
+      control: "inline-radio",
+      options: ["ltr", "rtl"],
+      description:
+        "The direction of the surrounding text. An icon that points along the line is mirrored with `rtl`.",
+    },
+    label: {
+      control: "text",
+      description:
+        "Names an icon that means something on its own. Without it the icon is decorative.",
+    },
     size: {
       control: "select",
       options: ["sm", "md", "lg"],
@@ -23,13 +48,33 @@ export default {
     docs: {
       description: {
         component:
-          "Generic inline icon primitive for glyphs, emoji, or custom symbol text. See `Data Display/Icon/Implementations` for Font Awesome and Lucide setup patterns.",
+          "Draws an icon from any Iconify set as inline SVG, or a glyph. See `Data Display/Icon/Implementations` for the icon sets.",
       },
     },
   },
 }
 
-export const Default = {
+export const FontAwesomeRegular = {
+  args: { icon: addressBookRegular, size: "lg", color: "current" },
+}
+
+export const FontAwesomeSolid = {
+  args: { icon: addressBookSolid, size: "lg", color: "current" },
+}
+
+export const MaterialOutline = {
+  args: { icon: settingsOutline, size: "lg", color: "current" },
+}
+
+export const MaterialFilled = {
+  args: { icon: settingsFilled, size: "lg", color: "current" },
+}
+
+export const RightToLeft = {
+  args: { icon: arrowBack, size: "lg", direction: "rtl" },
+}
+
+export const CustomIcon = {
   args: {
     children: "★",
     size: "md",

package/src/data-display/icon/style.css

@@ -1,6 +1,6 @@
-/* The size is a floor, not a fixed box. A font glyph takes the size's
-   font-size and fits it exactly; content that sizes itself (a Material icon
-   at lg, an SVG with its own width, a button) grows the box instead of
+/* The size is a floor, not a fixed box. A glyph or an `icon` takes the size's
+   font-size and fits it exactly, an SVG being drawn at 1em; content that sizes
+   itself (an SVG with its own width, a button) grows the box instead of
    overflowing it or being squeezed into it. */
 .iw-icon {
   display: inline-flex;
@@ -25,4 +25,11 @@
     min-height: var(--iw-space-6);
     font-size: var(--iw-font-size-2xl);
   }
+
+  /* An icon that points along the line, in right-to-left text. `scale`
+     rather than `transform`, so it adds to a rotation set elsewhere instead
+     of replacing it. */
+  &.iw-icon-rtl {
+    scale: -1 1;
+  }
 }

package/src/data-display/icon/template.js

@@ -1,21 +1,40 @@
 /**
  * @typedef {import('../../../types/data-display/icon').IconProps} IconProps
+ * @typedef {import('../../../types/data-display/icon').IconData} IconData
  * @typedef {import('@inglorious/web').TemplateResult} TemplateResult
  */
 
 import { html } from "@inglorious/web"
 import { classMap } from "@inglorious/web/directives/class-map"
+import { ref } from "@inglorious/web/directives/ref"
+import { unsafeSVG } from "@inglorious/web/directives/unsafe-svg"
+
+import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
- * Renders an inline icon element with size and color control.
- * Use it for custom SVG, emoji, or font-based glyphs.
+ * Renders an inline icon with size and color control.
+ *
+ * `icon` takes an icon in the Iconify format, the one every set on
+ * `@iconify-icons/*` exports: `import arrowBack from
+ * "@iconify-icons/material-symbols/arrow-back"`. It is drawn as inline SVG at
+ * 1em, so the size follows `size` and the color follows the text. Without
+ * `icon`, `children` is shown instead: an emoji, a glyph, any markup.
+ *
+ * `direction` is the direction of the text the icon sits in: an icon that
+ * points along the line, such as a back arrow, is mirrored with `"rtl"`.
+ * `label` names an icon that means something on its own; without one the
+ * icon is decorative and hidden from assistive technology.
+ *
  * @param {IconProps} props
  * @returns {TemplateResult}
  */
 export function render({
+  icon,
   children,
   size = "md",
   color = "current",
+  direction = "ltr",
+  label,
   className = "",
   onClick,
 }) {
@@ -31,11 +50,38 @@ export function render({
       "iw-icon": true,
       [`iw-icon-${size}`]: true,
       "iw-icon-current": color === "current",
+      "iw-icon-rtl": direction === "rtl",
       ...extraClasses,
     })}
     style=${color !== "current" ? `color: ${color};` : ""}
-    aria-hidden="true"
     @click=${onClick}
-    >${children}</span
+    ${ref((el) =>
+      applyElementProps(el, {
+        role: label ? "img" : null,
+        "aria-label": label ?? null,
+        "aria-hidden": label ? null : "true",
+      }),
+    )}
+    >${icon ? renderSvg(icon) : children}</span
   >`
 }
+
+/**
+ * The icon as an SVG one em square. The body comes from the icon set, which is
+ * code the app chose to import, so it is inserted as markup. Iconify leaves out
+ * a 16 by 16 box at the origin, the format's default.
+ * @param {IconData} icon
+ * @returns {TemplateResult}
+ */
+function renderSvg({ body, width = 16, height = 16, left = 0, top = 0 }) {
+  return html`<svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="${left} ${top} ${width} ${height}"
+    width="1em"
+    height="1em"
+    fill="currentColor"
+    focusable="false"
+  >
+    ${unsafeSVG(body)}
+  </svg>`
+}

package/src/examples/dashboard/app-drawer.js

@@ -1,9 +1,16 @@
+import buttonsAltOutline from "@iconify-icons/material-symbols/buttons-alt-outline"
+import databaseOutline from "@iconify-icons/material-symbols/database-outline"
+import exploreOutline from "@iconify-icons/material-symbols/explore-outline"
+import gridViewOutline from "@iconify-icons/material-symbols/grid-view-outline"
+import layersOutline from "@iconify-icons/material-symbols/layers-outline"
+import notificationsOutline from "@iconify-icons/material-symbols/notifications-outline"
+import speedOutline from "@iconify-icons/material-symbols/speed-outline"
 import { html } from "@inglorious/web"
 
 import { Avatar } from "../../data-display/avatar"
 import { Badge } from "../../data-display/badge"
+import { Icon } from "../../data-display/icon"
 import { List } from "../../data-display/list"
-import { MaterialIcon } from "../../data-display/material-icon"
 import { Flex } from "../../layout/flex"
 import { Drawer } from "../../navigation/drawer"
 
@@ -72,7 +79,7 @@ function mapItemsForRender(entity, items, api) {
     const mappedItem = { ...item }
 
     if (item.icon) {
-      mappedItem.icon = MaterialIcon.render({ name: item.icon, size: "lg" })
+      mappedItem.icon = Icon.render({ icon: item.icon, size: "lg" })
     }
 
     if (item.badge) {
@@ -107,7 +114,7 @@ function getDefaultItems() {
     {
       id: "dashboard",
       primary: "Dashboard",
-      icon: "speed",
+      icon: speedOutline,
       href: "/",
       badge: {
         color: "info",
@@ -119,7 +126,7 @@ function getDefaultItems() {
     {
       id: "layout",
       primary: "Layout",
-      icon: "grid_view",
+      icon: gridViewOutline,
       children: [
         { id: "container", primary: "Container", href: "/layout/container" },
         { id: "flex", primary: "Flex", href: "/layout/flex" },
@@ -129,7 +136,7 @@ function getDefaultItems() {
     {
       id: "controls",
       primary: "Controls",
-      icon: "buttons_alt",
+      icon: buttonsAltOutline,
       children: [
         { id: "button", primary: "Button", href: "/controls/button" },
         {
@@ -166,7 +173,7 @@ function getDefaultItems() {
     {
       id: "data-display",
       primary: "Data Display",
-      icon: "database",
+      icon: databaseOutline,
       children: [
         { id: "avatar", primary: "Avatar", href: "/data-display/avatar" },
         { id: "badge", primary: "Badge", href: "/data-display/badge" },
@@ -185,11 +192,6 @@ function getDefaultItems() {
         { id: "divider", primary: "Divider", href: "/data-display/divider" },
         { id: "icon", primary: "Icon", href: "/data-display/icon" },
         { id: "list", primary: "List", href: "/data-display/list" },
-        {
-          id: "material-icon",
-          primary: "Material Icon",
-          href: "/data-display/material-icon",
-        },
         { id: "table", primary: "Table", href: "/data-display/table" },
         { id: "tooltip", primary: "Tooltip", href: "/data-display/tooltip" },
         {
@@ -202,7 +204,7 @@ function getDefaultItems() {
     {
       id: "feedback",
       primary: "Feedback",
-      icon: "notifications",
+      icon: notificationsOutline,
       children: [
         { id: "alert", primary: "Alert", href: "/feedback/alert" },
         { id: "backdrop", primary: "Backdrop", href: "/feedback/backdrop" },
@@ -215,7 +217,7 @@ function getDefaultItems() {
     {
       id: "navigation",
       primary: "Navigation",
-      icon: "explore",
+      icon: exploreOutline,
       children: [
         {
           id: "bottom-navigation",
@@ -247,7 +249,7 @@ function getDefaultItems() {
     {
       id: "surfaces",
       primary: "Surfaces",
-      icon: "layers",
+      icon: layersOutline,
       children: [
         { id: "accordion", primary: "Accordion", href: "/surfaces/accordion" },
         { id: "app-bar", primary: "App Bar", href: "/surfaces/app-bar" },