@inglorious/ui 7.8.1 → 8.1.0

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

@@ -1,10 +1,19 @@
+import android from "@iconify-icons/fa7-brands/android"
+import bootstrap from "@iconify-icons/fa7-brands/bootstrap"
+import gamepad from "@iconify-icons/fa7-solid/gamepad"
+import contrastOutline from "@iconify-icons/material-symbols/contrast-outline"
+import darkModeOutline from "@iconify-icons/material-symbols/dark-mode-outline"
+import formatListBulletedOutline from "@iconify-icons/material-symbols/format-list-bulleted-outline"
+import lightModeOutline from "@iconify-icons/material-symbols/light-mode-outline"
+import mailOutline from "@iconify-icons/material-symbols/mail-outline"
+import menuOutline from "@iconify-icons/material-symbols/menu-outline"
+import notificationsOutline from "@iconify-icons/material-symbols/notifications-outline"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
 import { Avatar } from "../../data-display/avatar"
 import { Divider } from "../../data-display/divider"
 import { Icon } from "../../data-display/icon"
-import { MaterialIcon } from "../../data-display/material-icon"
 import { Flex } from "../../layout/flex"
 import { Breadcrumbs } from "../../navigation/breadcrumbs"
 import { AppBar } from "../../surfaces/app-bar"
@@ -17,16 +26,16 @@ export const AppHeader = {
     const themeName = themeEntity?.theme ?? "inglorious"
     const themeIcon =
       themeName === "bootstrap"
-        ? "fa-brands fa-bootstrap"
+        ? bootstrap
         : themeName === "material"
-          ? "fa-brands fa-android"
-          : "fa-solid fa-gamepad"
+          ? android
+          : gamepad
     const modeIcon =
       themeMode === "light"
-        ? "light_mode"
+        ? lightModeOutline
         : themeMode === "dark"
-          ? "dark_mode"
-          : "contrast"
+          ? darkModeOutline
+          : contrastOutline
 
     return html`
       <div class="iw-dashboard-header">
@@ -44,7 +53,7 @@ export const AppHeader = {
                   color: "secondary",
                   variant: "ghost",
                   shape: "square",
-                  children: MaterialIcon.render({ name: "menu", size: "lg" }),
+                  children: Icon.render({ icon: menuOutline, size: "lg" }),
                   "aria-label": "Toggle navigation",
                   onClick: () => api.notify(`#appDrawer:toggle`),
                 }),
@@ -79,8 +88,8 @@ export const AppHeader = {
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: MaterialIcon.render({
-                        name: "notifications",
+                      children: Icon.render({
+                        icon: notificationsOutline,
                         size: "lg",
                       }),
                       "aria-label": "Notifications",
@@ -89,8 +98,8 @@ export const AppHeader = {
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: MaterialIcon.render({
-                        name: "format_list_bulleted",
+                      children: Icon.render({
+                        icon: formatListBulletedOutline,
                       }),
                       "aria-label": "Tasks",
                     }),
@@ -98,8 +107,8 @@ export const AppHeader = {
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: MaterialIcon.render({
-                        name: "mail",
+                      children: Icon.render({
+                        icon: mailOutline,
                         size: "lg",
                       }),
                       "aria-label": "Messages",
@@ -111,7 +120,7 @@ export const AppHeader = {
                       variant: "ghost",
                       shape: "square",
                       children: Icon.render({
-                        children: html`<i class=${themeIcon}></i>`,
+                        icon: themeIcon,
                         size: "lg",
                       }),
                       "aria-label": `Theme: ${themeName}`,
@@ -121,8 +130,8 @@ export const AppHeader = {
                       color: "secondary",
                       variant: "ghost",
                       shape: "square",
-                      children: MaterialIcon.render({
-                        name: modeIcon,
+                      children: Icon.render({
+                        icon: modeIcon,
                         size: "lg",
                       }),
                       "aria-label": `Mode: ${themeMode}`,

package/src/examples/dashboard/data.js

@@ -1,10 +1,27 @@
+import ccAmex from "@iconify-icons/fa7-brands/cc-amex"
+import ccApplePay from "@iconify-icons/fa7-brands/cc-apple-pay"
+import ccMastercard from "@iconify-icons/fa7-brands/cc-mastercard"
+import ccPaypal from "@iconify-icons/fa7-brands/cc-paypal"
+import ccStripe from "@iconify-icons/fa7-brands/cc-stripe"
+import ccVisa from "@iconify-icons/fa7-brands/cc-visa"
+import alternateEmailOutline from "@iconify-icons/material-symbols/alternate-email-outline"
+import businessCenterOutline from "@iconify-icons/material-symbols/business-center-outline"
+import northOutline from "@iconify-icons/material-symbols/north-outline"
+import person2Outline from "@iconify-icons/material-symbols/person-2-outline"
+import personOutline from "@iconify-icons/material-symbols/person-outline"
+import publicOutline from "@iconify-icons/material-symbols/public-outline"
+import southOutline from "@iconify-icons/material-symbols/south-outline"
+import tagOutline from "@iconify-icons/material-symbols/tag-outline"
+import thumbUpOutline from "@iconify-icons/material-symbols/thumb-up-outline"
+import travelExploreOutline from "@iconify-icons/material-symbols/travel-explore-outline"
+import workOutline from "@iconify-icons/material-symbols/work-outline"
 export const statCards = [
   {
     id: "users",
     label: "Users",
     value: "26K",
     change: "-12.4%",
-    direction: "south",
+    trendIcon: southOutline,
     className: "iw-dashboard-stat-primary",
     chartType: "line",
     data: [65, 59, 84, 84, 51, 55, 40],
@@ -14,7 +31,7 @@ export const statCards = [
     label: "Income",
     value: "$6.2K",
     change: "40.9%",
-    direction: "north",
+    trendIcon: northOutline,
     className: "iw-dashboard-stat-info",
     chartType: "line",
     hasDots: true,
@@ -25,7 +42,7 @@ export const statCards = [
     label: "Conversion Rate",
     value: "2.49%",
     change: "84.7%",
-    direction: "north",
+    trendIcon: northOutline,
     className: "iw-dashboard-stat-warning",
     chartType: "area",
     data: [78, 81, 80, 45, 34, 12, 40],
@@ -35,7 +52,7 @@ export const statCards = [
     label: "Sessions",
     value: "44K",
     change: "-23.6%",
-    direction: "south",
+    trendIcon: southOutline,
     className: "iw-dashboard-stat-danger",
     chartType: "bar",
     data: [78, 81, 80, 45, 34, 12, 40, 85, 65, 23, 12, 98, 34, 84, 67, 82],
@@ -82,7 +99,7 @@ export const trafficSummary = [
 
 export const socialCards = [
   {
-    icon: "thumb_up",
+    icon: thumbUpOutline,
     capClass: "iw-dashboard-social-cap-facebook",
     top: "89k",
     bottom: "459",
@@ -91,7 +108,7 @@ export const socialCards = [
     data: [24, 28, 20, 30, 26, 34, 29],
   },
   {
-    icon: "alternate_email",
+    icon: alternateEmailOutline,
     capClass: "iw-dashboard-social-cap-twitter",
     top: "973k",
     bottom: "1.792",
@@ -100,7 +117,7 @@ export const socialCards = [
     data: [12, 19, 16, 22, 24, 28, 32],
   },
   {
-    icon: "work",
+    icon: workOutline,
     capClass: "iw-dashboard-social-cap-linkedin",
     top: "500+",
     bottom: "292",
@@ -121,12 +138,12 @@ export const clientBars = [
 ]
 
 export const sourceBars = [
-  ["Male", 43, "person", "warning", "", ""],
-  ["Female", 37, "person_2", "warning", "", ""],
-  ["Organic Search", 56, "travel_explore", "success", "191.235", "(56%)"],
-  ["Facebook", 15, "public", "success", "51.223", "(15%)"],
-  ["Twitter", 11, "tag", "success", "37.564", "(11%)"],
-  ["LinkedIn", 8, "business_center", "success", "27.319", "(8%)"],
+  ["Male", 43, personOutline, "warning", "", ""],
+  ["Female", 37, person2Outline, "warning", "", ""],
+  ["Organic Search", 56, travelExploreOutline, "success", "191.235", "(56%)"],
+  ["Facebook", 15, publicOutline, "success", "51.223", "(15%)"],
+  ["Twitter", 11, tagOutline, "success", "37.564", "(11%)"],
+  ["LinkedIn", 8, businessCenterOutline, "success", "27.319", "(8%)"],
 ]
 
 export const userRows = [
@@ -139,7 +156,7 @@ export const userRows = [
     country: "🇺🇸",
     usage: 50,
     range: "Jun 11, 2023 - Jul 10, 2023",
-    payment: "cc-mastercard",
+    payment: ccMastercard,
     activity: "10 sec ago",
   },
   {
@@ -151,7 +168,7 @@ export const userRows = [
     country: "🇧🇷",
     usage: 10,
     range: "Jun 11, 2023 - Jul 10, 2023",
-    payment: "cc-visa",
+    payment: ccVisa,
     activity: "5 minutes ago",
   },
   {
@@ -163,7 +180,7 @@ export const userRows = [
     country: "🇮🇳",
     usage: 74,
     range: "Jun 11, 2023 - Jul 10, 2023",
-    payment: "cc-stripe",
+    payment: ccStripe,
     activity: "1 hour ago",
   },
   {
@@ -175,7 +192,7 @@ export const userRows = [
     country: "🇫🇷",
     usage: 98,
     range: "Jun 11, 2023 - Jul 10, 2023",
-    payment: "cc-paypal",
+    payment: ccPaypal,
     activity: "Last month",
   },
   {
@@ -187,7 +204,7 @@ export const userRows = [
     country: "🇪🇸",
     usage: 22,
     range: "Jun 11, 2023 - Jul 10, 2023",
-    payment: "cc-apple-pay",
+    payment: ccApplePay,
     activity: "Last week",
   },
   {
@@ -199,7 +216,7 @@ export const userRows = [
     country: "🇵🇱",
     usage: 43,
     range: "Jun 11, 2023 - Jul 10, 2023",
-    payment: "cc-amex",
+    payment: ccAmex,
     activity: "Yesterday",
   },
 ]

package/src/examples/dashboard/primitive-content.js

@@ -1,3 +1,15 @@
+import gamepad from "@iconify-icons/fa7-solid/gamepad"
+import barChartOutline from "@iconify-icons/material-symbols/bar-chart-outline"
+import boltOutline from "@iconify-icons/material-symbols/bolt-outline"
+import contentCopyOutline from "@iconify-icons/material-symbols/content-copy-outline"
+import favoriteOutline from "@iconify-icons/material-symbols/favorite-outline"
+import homeOutline from "@iconify-icons/material-symbols/home-outline"
+import menuOutline from "@iconify-icons/material-symbols/menu-outline"
+import pauseOutline from "@iconify-icons/material-symbols/pause-outline"
+import personOutline from "@iconify-icons/material-symbols/person-outline"
+import searchOutline from "@iconify-icons/material-symbols/search-outline"
+import settingsOutline from "@iconify-icons/material-symbols/settings-outline"
+import speedOutline from "@iconify-icons/material-symbols/speed-outline"
 import { createStore } from "@inglorious/store"
 import { html, mount } from "@inglorious/web"
 
@@ -24,7 +36,6 @@ import { DataGrid } from "../../data-display/data-grid/index.js"
 import { Divider } from "../../data-display/divider/index.js"
 import { Icon } from "../../data-display/icon/index.js"
 import { List } from "../../data-display/list/index.js"
-import { MaterialIcon } from "../../data-display/material-icon/index.js"
 import { Table } from "../../data-display/table/index.js"
 import { Tooltip } from "../../data-display/tooltip/index.js"
 import { Typography } from "../../data-display/typography/index.js"
@@ -462,22 +473,23 @@ Fab.render({
     useCases: ["Toolbar controls", "Inline actions", "Overflow triggers"],
     example: {
       code: `import { IconButton } from "@inglorious/ui/icon-button"
-import { MaterialIcon } from "@inglorious/ui/material-icon"
+import { Icon } from "@inglorious/ui/icon"
+import settingsOutline from "@iconify-icons/material-symbols/settings-outline"
 
 IconButton.render({
-  icon: MaterialIcon.render({ name: "settings" }),
+  icon: Icon.render({ icon: settingsOutline }),
   label: "Settings",
   variant: "ghost"
 })`,
       preview: () =>
         previewRow([
           IconButton.render({
-            icon: MaterialIcon.render({ name: "settings" }),
+            icon: Icon.render({ icon: settingsOutline }),
             label: "Settings",
             variant: "ghost",
           }),
           IconButton.render({
-            icon: MaterialIcon.render({ name: "favorite" }),
+            icon: Icon.render({ icon: favoriteOutline }),
             label: "Favorite",
             variant: "ghost",
           }),
@@ -814,21 +826,23 @@ Divider.render({ orientation: "horizontal" })`,
     },
   },
   "/data-display/icon": {
-    summary: "Generic icon wrapper with size and color control.",
+    summary: "Icons from any Iconify set, drawn as inline SVG.",
     description:
-      "Icon is a neutral wrapper for SVGs or glyphs within UI layouts.",
+      "Icon draws an icon from Material Symbols, Font Awesome or any other Iconify set at the size of the text, or wraps a glyph.",
     useCases: ["Inline cues", "Status indicators", "UI affordances"],
     example: {
       code: `import { Icon } from "@inglorious/ui/icon"
+import boltOutline from "@iconify-icons/material-symbols/bolt-outline"
+import gamepad from "@iconify-icons/fa7-solid/gamepad"
 
-Icon.render({
-  size: "lg",
-  children: "★"
-})`,
+Icon.render({ icon: boltOutline, size: "lg" })
+Icon.render({ icon: gamepad, size: "lg" })
+Icon.render({ children: "★", size: "lg" })`,
       preview: () =>
         previewRow([
+          Icon.render({ icon: boltOutline, size: "lg" }),
+          Icon.render({ icon: gamepad, size: "lg" }),
           Icon.render({ size: "lg", children: "★" }),
-          Icon.render({ size: "lg", children: "⚡" }),
         ]),
     },
   },
@@ -854,35 +868,18 @@ List.render({
               id: "alpha",
               primary: "Alpha",
               secondary: "Ready",
-              icon: MaterialIcon.render({ name: "bolt", size: "sm" }),
+              icon: Icon.render({ icon: boltOutline, size: "sm" }),
             },
             {
               id: "beta",
               primary: "Beta",
               secondary: "Paused",
-              icon: MaterialIcon.render({ name: "pause", size: "sm" }),
+              icon: Icon.render({ icon: pauseOutline, size: "sm" }),
             },
           ],
         }),
     },
   },
-  "/data-display/material-icon": {
-    summary: "Material Symbols integration with consistent sizing.",
-    description:
-      "Material Icon renders Material Symbols with predefined size tokens.",
-    useCases: ["Standard iconography", "Toolbar actions", "Menus"],
-    example: {
-      code: `import { MaterialIcon } from "@inglorious/ui/material-icon"
-
-MaterialIcon.render({ name: "bolt", size: "lg" })`,
-      preview: () =>
-        previewRow([
-          MaterialIcon.render({ name: "bolt", size: "lg" }),
-          MaterialIcon.render({ name: "settings", size: "lg" }),
-          MaterialIcon.render({ name: "layers", size: "lg" }),
-        ]),
-    },
-  },
   "/data-display/table": {
     summary: "Lightweight table for structured data.",
     description:
@@ -934,7 +931,7 @@ Tooltip.render({
           isOpen: true,
           content: "Copy to clipboard",
           children: IconButton.render({
-            icon: MaterialIcon.render({ name: "content_copy" }),
+            icon: Icon.render({ icon: contentCopyOutline }),
             label: "Copy",
             variant: "ghost",
           }),
@@ -1120,9 +1117,9 @@ BottomNavigation.render({
         BottomNavigation.render({
           value: 1,
           actions: [
-            { label: "Home", icon: MaterialIcon.render({ name: "home" }) },
-            { label: "Search", icon: MaterialIcon.render({ name: "search" }) },
-            { label: "Profile", icon: MaterialIcon.render({ name: "person" }) },
+            { label: "Home", icon: Icon.render({ icon: homeOutline }) },
+            { label: "Search", icon: Icon.render({ icon: searchOutline }) },
+            { label: "Profile", icon: Icon.render({ icon: personOutline }) },
           ],
         }),
     },
@@ -1179,12 +1176,12 @@ Drawer.render({
               {
                 id: "home",
                 primary: "Dashboard",
-                icon: MaterialIcon.render({ name: "speed" }),
+                icon: Icon.render({ icon: speedOutline }),
               },
               {
                 id: "reports",
                 primary: "Reports",
-                icon: MaterialIcon.render({ name: "bar_chart" }),
+                icon: Icon.render({ icon: barChartOutline }),
               },
             ],
           }),
@@ -1391,7 +1388,7 @@ AppBar.render({
         AppBar.render({
           title: "Project Ops",
           subtitle: "SLA dashboard",
-          leading: MaterialIcon.render({ name: "menu" }),
+          leading: Icon.render({ icon: menuOutline }),
           trailing: Button.render({
             variant: "ghost",
             color: "secondary",

package/src/examples/dashboard/social-card.js

@@ -2,7 +2,7 @@ import { Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Divider } from "../../data-display/divider"
-import { MaterialIcon } from "../../data-display/material-icon"
+import { Icon } from "../../data-display/icon"
 import { Typography } from "../../data-display/typography"
 import { Grid } from "../../layout/grid"
 import { Card } from "../../surfaces/card"
@@ -14,7 +14,7 @@ export const SocialCard = {
       headerPadding: "none",
       header: html`
         <div class="iw-dashboard-social-cap ${entity.capClass}">
-          ${MaterialIcon.render({ name: entity.icon, size: "lg" })}
+          ${Icon.render({ icon: entity.icon, size: "lg" })}
           <div class="iw-dashboard-social-chart">
             ${this.renderAreaSpark(entity, api)}
           </div>

package/src/examples/dashboard/stat-card.js

@@ -1,8 +1,9 @@
+import moreVertOutline from "@iconify-icons/material-symbols/more-vert-outline"
 import { Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
-import { MaterialIcon } from "../../data-display/material-icon"
+import { Icon } from "../../data-display/icon"
 import { Typography } from "../../data-display/typography"
 import { Card } from "../../surfaces/card"
 
@@ -22,8 +23,8 @@ export const StatCard = {
                     variant: "caption",
                     children: html`<span class="iw-dashboard-stat-change">
                       ${entity.change}
-                      ${MaterialIcon.render({
-                        name: entity.direction,
+                      ${Icon.render({
+                        icon: entity.trendIcon,
                         size: "sm",
                       })}
                     </span>`,
@@ -40,7 +41,7 @@ export const StatCard = {
             variant: "ghost",
             shape: "square",
             className: "iw-dashboard-stat-more",
-            children: MaterialIcon.render({ name: "more_vert", size: "lg" }),
+            children: Icon.render({ icon: moreVertOutline, size: "lg" }),
             "aria-label": "More options",
           })}
         </div>

package/src/examples/dashboard/style.css

@@ -55,11 +55,12 @@
 
   .iw-dashboard-header-row {
     width: 100%;
-    padding-inline: var(--iw-space-4);
   }
 
+  /* Outside the app bar, so it pads itself to line up with it. */
   .iw-dashboard-breadcrumbs {
     min-height: var(--iw-space-12);
+    padding-inline: var(--iw-space-4);
   }
 }
 
@@ -80,9 +81,9 @@
   overflow: hidden;
 
   .iw-typography,
-  .iw-material-icon,
+  .iw-icon,
   .iw-button,
-  .iw-button .iw-material-icon {
+  .iw-button .iw-icon {
     color: white;
   }
 }
@@ -324,6 +325,8 @@
 @media (max-width: 64rem) {
   .iw-dashboard-header-row {
     flex-wrap: wrap;
+  }
+  .iw-dashboard-header .iw-dashboard-breadcrumbs {
     padding-inline: var(--iw-space-3);
   }
   .iw-dashboard-content {

package/src/examples/dashboard/traffic-card.js

@@ -1,9 +1,10 @@
+import downloadOutline from "@iconify-icons/material-symbols/download-outline"
 import { Chart } from "@inglorious/charts"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
 import { ButtonGroup } from "../../controls/button-group"
-import { MaterialIcon } from "../../data-display/material-icon"
+import { Icon } from "../../data-display/icon"
 import { Typography } from "../../data-display/typography"
 import { Progress } from "../../feedback/progress"
 import { Flex } from "../../layout/flex"
@@ -44,7 +45,7 @@ export const TrafficCard = {
               Button.render({
                 size: "md",
                 color: "primary",
-                children: MaterialIcon.render({ name: "download" }),
+                children: Icon.render({ icon: downloadOutline }),
                 "aria-label": "Download report",
               }),
             ],

package/src/examples/dashboard/traffic-sales-card.js

@@ -1,10 +1,10 @@
+import moreVertOutline from "@iconify-icons/material-symbols/more-vert-outline"
 import { html } from "@inglorious/web"
 
 import { Button } from "../../controls/button"
 import { Avatar } from "../../data-display/avatar"
 import { Badge } from "../../data-display/badge"
 import { Icon } from "../../data-display/icon"
-import { MaterialIcon } from "../../data-display/material-icon"
 import { Table } from "../../data-display/table"
 import { Typography } from "../../data-display/typography"
 import { Progress } from "../../feedback/progress"
@@ -123,8 +123,8 @@ export const TrafficSalesCard = {
                               align: "center",
                               gap: "sm",
                               children: [
-                                MaterialIcon.render({
-                                  name: iconName,
+                                Icon.render({
+                                  icon: iconName,
                                   size: "lg",
                                 }),
                                 html`<span class="iw-typography"
@@ -233,13 +233,7 @@ export const TrafficSalesCard = {
               })}
             `,
             payment: html`<div class="iw-dashboard-payment">
-              ${Icon.render({
-                size: "lg",
-                children: html`<i
-                  class="fa-brands fa-${row.payment}"
-                  aria-hidden="true"
-                ></i>`,
-              })}
+              ${Icon.render({ icon: row.payment, size: "lg" })}
             </div>`,
             activity: html`
               <div>
@@ -254,7 +248,7 @@ export const TrafficSalesCard = {
                 ${Button.render({
                   variant: "ghost",
                   color: "secondary",
-                  children: MaterialIcon.render({ name: "more_vert" }),
+                  children: Icon.render({ icon: moreVertOutline }),
                   "aria-label": "Row actions",
                 })}
               </div>

package/src/index.js

@@ -20,7 +20,6 @@ export { DataGrid } from "./data-display/data-grid/index.js"
 export { Divider } from "./data-display/divider/index.js"
 export { Icon } from "./data-display/icon/index.js"
 export { List } from "./data-display/list/index.js"
-export { MaterialIcon } from "./data-display/material-icon/index.js"
 export { Table } from "./data-display/table/index.js"
 export { Tooltip } from "./data-display/tooltip/index.js"
 export { Typography } from "./data-display/typography/index.js"

package/src/navigation/bottom-navigation/style.css

@@ -19,7 +19,9 @@
   align-items: center;
   justify-content: center;
   gap: var(--iw-space-1);
-  padding: var(--iw-space-2);
+  /* Narrow sides: a tab is a quarter or a fifth of a phone, and its label
+     needs every pixel of it. */
+  padding: var(--iw-space-2) var(--iw-space-1);
   cursor: pointer;
 }
 
@@ -27,8 +29,10 @@
   color: var(--iw-color-primary);
 }
 
+/* 12px, as Material sizes navigation labels: at 14px, "Applications" or
+   "Candidatures" does not fit a quarter of a 360px phone. */
 .iw-bottom-navigation-label {
-  font-size: var(--iw-font-size-sm);
+  font-size: var(--iw-font-size-xs);
   /* One line, like its neighbours: a label too long for its tab is cut short
      rather than wrapping, which in languages that break between any two
      characters (Japanese, Chinese) splits a word and makes the bar taller. */

package/src/navigation/drawer/template.js

@@ -7,9 +7,10 @@ import { html } from "@inglorious/web"
 import { when } from "@inglorious/web/directives/when"
 
 import { Button } from "../../controls/button"
-import { MaterialIcon } from "../../data-display/material-icon"
+import { Icon } from "../../data-display/icon"
 import { Backdrop } from "../../feedback/backdrop"
 import { Flex } from "../../layout/flex"
+import { close, leftPanelClose } from "../../shared/icons.js"
 
 /**
  * Renders a side drawer panel with optional header, body, and collapse controls.
@@ -80,10 +81,7 @@ export function render(props) {
                     className: "iw-drawer-close",
                     "aria-label": "Close",
                     onClick: onClose,
-                    children: MaterialIcon.render({
-                      name: "close",
-                      size: "lg",
-                    }),
+                    children: Icon.render({ icon: close, size: "lg" }),
                   }),
                 ),
               ],
@@ -113,10 +111,7 @@ export function render(props) {
                   ? "Expand sidebar"
                   : "Collapse sidebar",
                 onClick: onCollapseToggle,
-                children: MaterialIcon.render({
-                  name: "left_panel_close",
-                  size: "lg",
-                }),
+                children: Icon.render({ icon: leftPanelClose, size: "lg" }),
               }),
             })}
           `,

package/src/shared/icons.js

@@ -0,0 +1,15 @@
+// The few icons the components draw themselves, so the library needs no icon
+// set of its own. From Material Symbols (Apache License 2.0), in the Iconify
+// format that `Icon` takes.
+
+export const close = {
+  width: 24,
+  height: 24,
+  body: '<path fill="currentColor" d="M6.4 19L5 17.6l5.6-5.6L5 6.4L6.4 5l5.6 5.6L17.6 5L19 6.4L13.4 12l5.6 5.6l-1.4 1.4l-5.6-5.6z"/>',
+}
+
+export const leftPanelClose = {
+  width: 24,
+  height: 24,
+  body: '<path fill="currentColor" d="M16.5 16V8l-4 4zM5 21q-.825 0-1.412-.587T3 19V5q0-.825.588-1.412T5 3h14q.825 0 1.413.588T21 5v14q0 .825-.587 1.413T19 21zm3-2V5H5v14zm2 0h9V5h-9zm-2 0H5z"/>',
+}