Replaced icons with material symbols

examples/example_pro/src/FirestoreApp/collection_actions/OpenAIInstructionsActions.tsx

@@ -46,8 +46,8 @@ export function OpenAIInstructionsActions() {
                 open={open}
                 onOpenChange={setOpen}
             >
-                <DialogTitle>OpenAI data enhancement</DialogTitle>
-                <DialogContent className="p-8 flex flex-col space-y-2">
+                <DialogTitle variant={"h5"}>OpenAI data enhancement</DialogTitle>
+                <DialogContent className="flex flex-col space-y-2">
                     <Typography gutterBottom>
                         Try it out by clicking on <b>ADD BOOK</b> and
                         then typing the title of your favourite book on the <b>AUTOFILL

packages/collection_editor/src/ui/collection_editor/PropertyEditView.tsx

@@ -31,7 +31,7 @@ import {
     InfoLabel,
     Tooltip,
     Typography,
-    WarningOffIcon
+    WarningIcon
 } from "@firecms/ui";
 import { EnumPropertyField } from "./properties/EnumPropertyField";
 import { StoragePropertyField } from "./properties/StoragePropertyField";
@@ -774,7 +774,7 @@ export function WidgetSelectViewItem({
                 <div className={"flex flex-row gap-2 items-center"}>
                     {shouldWarnChangingDataType && <Tooltip
                         title={"This widget uses a different data type than the initially selected widget. This can cause errors with existing data."}>
-                        <WarningOffIcon size="smallest" className={"w-4"}/>
+                        <WarningIcon size="smallest" className={"w-4"}/>
                     </Tooltip>}
                     <Typography
                         color={shouldWarnChangingDataType ? "secondary" : undefined}>{propertyConfig.name}</Typography>

packages/firecms_core/src/core/FireCMS.tsx

@@ -1,7 +1,7 @@
 "use client";
 
 import React, { useMemo } from "react";
-import { CenteredView, Typography } from "@firecms/ui";
+import { CenteredView, Typography, useIconStyles } from "@firecms/ui";
 import { CustomizationController, EntityCollection, FireCMSContext, FireCMSPlugin, FireCMSProps, User } from "../types";
 import { AuthControllerContext } from "../contexts";
 import { useBuildSideEntityController } from "../internal/useBuildSideEntityController";
@@ -68,6 +68,8 @@ export function FireCMS<USER extends User, EC extends EntityCollection>(props: F
 
     const loading = authController.initialLoading || navigationController.loading || pluginsLoading;
 
+    useIconStyles({});
+
     const customizationController: CustomizationController = {
         dateTimeFormat,
         locale,

packages/ui/package.json

@@ -74,7 +74,7 @@
     "cmdk": "^0.2.1",
     "date-fns": "^3.6.0",
     "markdown-it": "^14.1.0",
-    "material-icons": "^1.13.12",
+    "material-symbols": "^0.27.1",
     "react-dropzone": "^14.3.5",
     "react-fast-compare": "^3.2.2",
     "tailwind-merge": "^2.5.5"

packages/ui/src/hooks/index.ts

@@ -1,3 +1,4 @@
 export * from "./useInjectStyles";
 export * from "./useOutsideAlerter";
 export * from "./useDebounceValue";
+export * from "./useIconStyles";

packages/ui/src/hooks/useIconStyles.tsx

@@ -0,0 +1,20 @@
+import { useInjectStyles } from "./useInjectStyles";
+
+export type IconStyle = {
+    fill?: boolean;
+    weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900;
+    grad?: -25 | 0 | 200;
+    opticalSize?: 20 | 24 | 40 | 48;
+}
+
+export function useIconStyles({
+                                  fill = true,
+                                  weight = 500,
+                                  grad = 0,
+                                  opticalSize = 24
+                              } : IconStyle) {
+    useInjectStyles("icons", `
+.material-symbols-rounded {
+  font-variation-settings: 'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grad}, 'opsz' ${opticalSize};
+}`);
+}

packages/ui/src/icons/Icon.tsx

@@ -2,7 +2,8 @@
 
 import * as React from "react";
 import { cls } from "../util";
-import "material-icons/iconfont/filled.css";
+import "material-symbols/rounded.css";
+import "./default.css";
 
 export type IconColor = "inherit" | "primary" | "secondary" | "disabled" | "error" | "success" | "warning";
 export type IconProps = {
@@ -58,7 +59,7 @@ export const Icon = React.forwardRef<HTMLSpanElement, IconProps & { iconKey: str
                 ...style
             }}
             className={
-                cls("material-icons",
+                cls("material-symbols-rounded",
                     color ? colorClassesMapping[color] : "",
                     "select-none",
                     className)}

packages/ui/src/icons/components/AddchartIcon.tsx → packages/ui/src/icons/components/AddChartIcon.tsx

@@ -3,6 +3,6 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function AddchartIcon(props: IconProps) {
+export function AddChartIcon(props: IconProps) {
     return <Icon {...props} iconKey={"addchart"}/>
 }

packages/ui/src/icons/components/AmendIcon.tsx → packages/ui/src/icons/components/AdobeIcon.tsx

@@ -3,6 +3,6 @@ import { Icon, IconProps } from "../Icon";
 /**
  * @group Icons
  */
-export function AmendIcon(props: IconProps) {
-    return <Icon {...props} iconKey={"amend"}/>
+export function AdobeIcon(props: IconProps) {
+    return <Icon {...props} iconKey={"adobe"}/>
 }

packages/ui/src/icons/components/AirplanemodeOffIcon.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Icon, IconProps } from "../Icon";
+/**
+ * @group Icons
+ */
+export function AirplanemodeOffIcon(props: IconProps) {
+    return <Icon {...props} iconKey={"airplanemode_off"}/>
+}

packages/ui/src/icons/components/AirplanemodeOnIcon.tsx

@@ -0,0 +1,8 @@
+import React from "react";
+import { Icon, IconProps } from "../Icon";
+/**
+ * @group Icons
+ */
+export function AirplanemodeOnIcon(props: IconProps) {
+    return <Icon {...props} iconKey={"airplanemode_on"}/>
+}