@parathantl/react-email-editor 0.1.9 → 0.1.11

package/README.md

@@ -165,6 +165,81 @@ Or pass MJML at init time without a ref:
 | `className` | `string` | CSS class for the outer wrapper |
 | `style` | `CSSProperties` | Inline styles for the outer wrapper |
 
+## Custom Icons (`customIcons`)
+
+You can pass `customIcons` to override built-in UI icons.  
+Every key is optional. If you skip a key, the editor uses its default emoji/icon.
+
+```tsx
+<EmailEditor
+  customIcons={{
+    desktop: '🖥️',
+    mobile: '📱',
+    undo: '↩️',
+    redo: '↪️',
+    addSection: '➕',
+    sidebar: '📚',
+    properties: '⚙️',
+    visual: '🎨',
+    source: '🧾',
+    preview: '👁️',
+    sectionDrag: '↕️',
+    sectionDuplicate: '📄',
+    sectionRemove: '🗑️',
+    blockDuplicate: '📄',
+    blockRemove: '🗑️',
+    previewDesktop: '🖥️',
+    previewMobile: '📱',
+    paletteText: '📝',
+    paletteHeading: '🔤',
+    paletteButton: '🔘',
+    paletteImage: '🖼️',
+    paletteVideo: '▶️',
+    paletteDivider: '➖',
+    paletteSpacer: '↕️',
+    paletteSocial: '🌐',
+    paletteHtml: '💻',
+    paletteCountdown: '⏰',
+    paletteMenu: '📋',
+    paletteHero: '⭐',
+  }}
+/>
+```
+
+### Available `customIcons` keys
+
+| Key | Used In |
+|-----|---------|
+| `desktop` | Canvas desktop view toggle |
+| `mobile` | Canvas mobile view toggle |
+| `undo` | Canvas undo button |
+| `redo` | Canvas redo button |
+| `addSection` | Canvas "Add Section" button |
+| `sidebar` | Toolbar sidebar toggle button |
+| `properties` | Toolbar properties toggle button |
+| `visual` | Toolbar Visual tab icon |
+| `source` | Toolbar Source tab icon |
+| `preview` | Toolbar Preview tab icon |
+| `sectionDrag` | Section drag handle |
+| `sectionDuplicate` | Section duplicate action |
+| `sectionRemove` | Section remove action |
+| `blockDuplicate` | Block duplicate action |
+| `blockRemove` | Block remove action |
+| `previewDesktop` | Preview panel desktop toggle |
+| `previewMobile` | Preview panel mobile toggle |
+| `paletteText` | Block palette icon for Text |
+| `paletteHeading` | Block palette icon for Heading |
+| `paletteButton` | Block palette icon for Button |
+| `paletteImage` | Block palette icon for Image |
+| `paletteVideo` | Block palette icon for Video |
+| `paletteDivider` | Block palette icon for Divider |
+| `paletteSpacer` | Block palette icon for Spacer |
+| `paletteSocial` | Block palette icon for Social |
+| `paletteHtml` | Block palette icon for HTML |
+| `paletteCountdown` | Block palette icon for Countdown |
+| `paletteMenu` | Block palette icon for Menu |
+| `paletteHero` | Block palette icon for Hero |
+
 ## Block Types
 
 | Type | Description | MJML Output |

package/dist/index.cjs

@@ -3078,11 +3078,18 @@ var editor_default = {
 
 // src/components/Toolbar/Toolbar.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onToggleSidebar, onToggleProperties, toolbarActions }) {
+var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, propertiesOpen, onToggleSidebar, onToggleProperties, toolbarActions, customIcons }) {
   const { template, activeTab } = useTemplateContext();
   const dispatch = useEditorDispatch();
   const fileInputRef = (0, import_react15.useRef)(null);
   const [exportOpen, setExportOpen] = (0, import_react15.useState)(false);
+  const sidebarIcon = customIcons?.sidebar ?? "\u{1F4DA}";
+  const propertiesIcon = customIcons?.properties ?? "\u2699\uFE0F";
+  const tabIcons = {
+    visual: customIcons?.visual ?? "\u{1F3A8}",
+    source: customIcons?.source ?? "\u{1F9FE}",
+    preview: customIcons?.preview ?? "\u{1F441}\uFE0F"
+  };
   const templateRef = (0, import_react15.useRef)(template);
   templateRef.current = template;
   (0, import_react15.useEffect)(() => {
@@ -3173,7 +3180,7 @@ var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, prope
           "aria-label": "Toggle sidebar",
           "aria-pressed": sidebarOpen,
           title: "Toggle sidebar",
-          children: "\u2630"
+          children: sidebarIcon
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
@@ -3184,19 +3191,22 @@ var Toolbar = import_react15.default.memo(function Toolbar2({ sidebarOpen, prope
           "aria-label": "Toggle properties",
           "aria-pressed": propertiesOpen,
           title: "Toggle properties",
-          children: "\u2699"
+          children: propertiesIcon
         }
       )
     ] }),
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `ee-toolbar-separator ${toolbar_default.toolbarSeparator}`, role: "separator" }),
-    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `ee-toolbar-tabs ${toolbar_default.tabBar}`, role: "tablist", "aria-label": "Editor views", children: ["visual", "source", "preview"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: `ee-toolbar-tabs ${toolbar_default.tabBar}`, role: "tablist", "aria-label": "Editor views", children: ["visual", "source", "preview"].map((tab) => /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
       "button",
       {
         role: "tab",
         "aria-selected": activeTab === tab,
         className: `ee-toolbar-tab ee-toolbar-tab--${tab} ${toolbar_default.tabBtn} ${activeTab === tab ? toolbar_default.tabBtnActive : ""}`,
         onClick: () => handleTabChange(tab),
-        children: tab.charAt(0).toUpperCase() + tab.slice(1)
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ee-toolbar-tab-icon", children: tabIcons[tab] }),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("span", { className: "ee-toolbar-tab-label", children: tab.charAt(0).toUpperCase() + tab.slice(1) })
+        ]
       },
       tab
     )) }),
@@ -3334,7 +3344,21 @@ var sidebar_default = {
 
 // src/components/Sidebar/BlockPalette.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
-var BlockPalette = import_react16.default.memo(function BlockPalette2({ blockDefinitions }) {
+var BLOCK_PALETTE_ICON_KEYS = {
+  text: "paletteText",
+  heading: "paletteHeading",
+  button: "paletteButton",
+  image: "paletteImage",
+  video: "paletteVideo",
+  divider: "paletteDivider",
+  spacer: "paletteSpacer",
+  social: "paletteSocial",
+  html: "paletteHtml",
+  countdown: "paletteCountdown",
+  menu: "paletteMenu",
+  hero: "paletteHero"
+};
+var BlockPalette = import_react16.default.memo(function BlockPalette2({ blockDefinitions, customIcons }) {
   const defs = blockDefinitions ?? BLOCK_DEFINITIONS;
   const dispatch = useEditorDispatch();
   const { template } = useTemplateContext();
@@ -3360,30 +3384,34 @@ var BlockPalette = import_react16.default.memo(function BlockPalette2({ blockDef
     },
     [dispatch, template.sections]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `ee-block-palette ${sidebar_default.blockPalette}`, role: "list", "aria-label": "Available blocks", children: defs.map((def) => /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
-    "div",
-    {
-      "data-block-type": def.type,
-      className: `ee-palette-item ee-palette-item--${def.type} ${sidebar_default.blockCard}`,
-      draggable: true,
-      onDragStart: (e) => handleDragStart(def.type, e),
-      title: def.description,
-      role: "listitem",
-      "aria-label": `${def.label} block - drag or press Enter to add`,
-      tabIndex: 0,
-      onKeyDown: (e) => {
-        if (e.key === "Enter" || e.key === " ") {
-          e.preventDefault();
-          handleKeyboardAdd(def.type);
-        }
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: `ee-block-palette ${sidebar_default.blockPalette}`, role: "list", "aria-label": "Available blocks", children: defs.map((def) => {
+    const iconKey = BLOCK_PALETTE_ICON_KEYS[def.type];
+    const icon = customIcons?.[iconKey] ?? def.icon;
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      "div",
+      {
+        "data-block-type": def.type,
+        className: `ee-palette-item ee-palette-item--${def.type} ${sidebar_default.blockCard}`,
+        draggable: true,
+        onDragStart: (e) => handleDragStart(def.type, e),
+        title: def.description,
+        role: "listitem",
+        "aria-label": `${def.label} block - drag or press Enter to add`,
+        tabIndex: 0,
+        onKeyDown: (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handleKeyboardAdd(def.type);
+          }
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `ee-palette-icon ${sidebar_default.blockCardIcon}`, "aria-hidden": "true", children: icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `ee-palette-label ${sidebar_default.blockCardLabel}`, children: def.label })
+        ]
       },
-      children: [
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `ee-palette-icon ${sidebar_default.blockCardIcon}`, "aria-hidden": "true", children: def.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: `ee-palette-label ${sidebar_default.blockCardLabel}`, children: def.label })
-      ]
-    },
-    def.type
-  )) });
+      def.type
+    );
+  }) });
 });
 
 // src/components/Sidebar/VariableList.tsx
@@ -3562,7 +3590,7 @@ function AddVariableForm() {
 
 // src/components/Sidebar/Sidebar.tsx
 var import_jsx_runtime8 = require("react/jsx-runtime");
-function Sidebar({ blockDefinitions }) {
+function Sidebar({ blockDefinitions, customIcons }) {
   const dispatch = useEditorDispatch();
   const handleAddSection = (0, import_react19.useCallback)(
     (widths) => {
@@ -3575,7 +3603,7 @@ function Sidebar({ blockDefinitions }) {
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(VariableList, {}),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: sidebar_default.addVariableSection, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(AddVariableForm, {}) }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: `ee-sidebar-title ${sidebar_default.sectionTitle}`, children: "Blocks" }),
-    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlockPalette, { blockDefinitions }),
+    /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(BlockPalette, { blockDefinitions, customIcons }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("h3", { className: `ee-sidebar-title ${sidebar_default.sectionTitle}`, children: "Layouts" }),
     /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { className: `ee-layout-section ${sidebar_default.layoutSection}`, children: COLUMN_LAYOUTS.map((layout) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
       "div",
@@ -27649,10 +27677,12 @@ function getBlockData(e) {
   if (!blockId || index === void 0) return null;
   return { blockId, index: Number(index) };
 }
-var Column = import_react41.default.memo(function Column2({ column, sectionId }) {
+var Column = import_react41.default.memo(function Column2({ column, sectionId, customIcons }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
   const [blockToRemove, setBlockToRemove] = (0, import_react41.useState)(null);
+  const blockDuplicateIcon = customIcons?.blockDuplicate ?? "\u{1F4C4}";
+  const blockRemoveIcon = customIcons?.blockRemove ?? "\u{1F5D1}\uFE0F";
   const confirmRemoveBlock = (0, import_react41.useCallback)(
     (blockId) => {
       setBlockToRemove(blockId);
@@ -27848,7 +27878,7 @@ var Column = import_react41.default.memo(function Column2({ column, sectionId })
                   onClick: handleDuplicateClick,
                   title: "Duplicate block",
                   "aria-label": "Duplicate block",
-                  children: "\u29C9"
+                  children: blockDuplicateIcon
                 }
               ),
               /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
@@ -27858,7 +27888,7 @@ var Column = import_react41.default.memo(function Column2({ column, sectionId })
                   onClick: handleRemoveClick,
                   title: "Remove block",
                   "aria-label": "Remove block",
-                  children: "x"
+                  children: blockRemoveIcon
                 }
               )
             ] }),
@@ -27889,12 +27919,15 @@ var Column = import_react41.default.memo(function Column2({ column, sectionId })
 
 // src/components/Canvas/Section.tsx
 var import_jsx_runtime30 = require("react/jsx-runtime");
-var Section = import_react42.default.memo(function Section2({ section }) {
+var Section = import_react42.default.memo(function Section2({ section, customIcons }) {
   const selection = useSelectionContext();
   const dispatch = useEditorDispatch();
   const { template } = useTemplateContext();
   const isSelected = selection.sectionId === section.id && !selection.blockId;
   const [showRemoveConfirm, setShowRemoveConfirm] = (0, import_react42.useState)(false);
+  const sectionDragIcon = customIcons?.sectionDrag ?? "\u2195\uFE0F";
+  const sectionDuplicateIcon = customIcons?.sectionDuplicate ?? "\u{1F4C4}";
+  const sectionRemoveIcon = customIcons?.sectionRemove ?? "\u{1F5D1}\uFE0F";
   const handleClick2 = (0, import_react42.useCallback)(
     (e) => {
       e.stopPropagation();
@@ -27969,7 +28002,7 @@ var Section = import_react42.default.memo(function Section2({ section }) {
               role: "button",
               "aria-label": "Reorder section with Arrow Up/Down keys",
               tabIndex: 0,
-              children: "\u283F"
+              children: sectionDragIcon
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -27979,7 +28012,7 @@ var Section = import_react42.default.memo(function Section2({ section }) {
               onClick: handleDuplicate,
               title: "Duplicate section",
               "aria-label": "Duplicate section",
-              children: "\u29C9"
+              children: sectionDuplicateIcon
             }
           ),
           /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
@@ -27989,11 +28022,11 @@ var Section = import_react42.default.memo(function Section2({ section }) {
               onClick: handleRemove,
               title: "Remove section",
               "aria-label": "Remove section",
-              children: "x"
+              children: sectionRemoveIcon
             }
           )
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Column, { column, sectionId: section.id }, column.id)) }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: canvas_default.sectionContent, children: section.columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Column, { column, sectionId: section.id, customIcons }, column.id)) }),
         showRemoveConfirm && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           ConfirmDialog,
           {
@@ -28064,7 +28097,7 @@ var SectionDropZone = import_react43.default.memo(function SectionDropZone2({ in
 // src/components/Canvas/Canvas.tsx
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var MOBILE_WIDTH = 375;
-var Canvas = import_react44.default.memo(function Canvas2() {
+var Canvas = import_react44.default.memo(function Canvas2({ customIcons }) {
   const { template } = useTemplateContext();
   const { canUndo, canRedo } = useHistoryContext();
   const dispatch = useEditorDispatch();
@@ -28114,6 +28147,10 @@ var Canvas = import_react44.default.memo(function Canvas2() {
     dispatch({ type: "REDO" });
   }, [dispatch]);
   const canvasWidth = previewMode === "mobile" ? MOBILE_WIDTH : template.globalStyles.width;
+  const desktopIcon = customIcons?.desktop ?? "\u{1F5A5}";
+  const mobileIcon = customIcons?.mobile ?? "\u{1F4F1}";
+  const undoIcon = customIcons?.undo ?? "\u21A9";
+  const redoIcon = customIcons?.redo ?? "\u21AA";
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-canvas-area ${canvas_default.canvasArea}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-canvas-header ${canvas_default.canvasHeader}`, children: [
       /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: `ee-canvas-header-center ${canvas_default.canvasHeaderCenter}`, children: /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: `ee-canvas-view-toggle ${canvas_default.canvasHeaderGroup}`, role: "group", "aria-label": "Preview size", children: [
@@ -28125,7 +28162,7 @@ var Canvas = import_react44.default.memo(function Canvas2() {
             "aria-pressed": previewMode === "desktop",
             "aria-label": "Desktop view",
             title: `Desktop (${template.globalStyles.width}px)`,
-            children: "\u{1F5A5}"
+            children: desktopIcon
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -28136,7 +28173,7 @@ var Canvas = import_react44.default.memo(function Canvas2() {
             "aria-pressed": previewMode === "mobile",
             "aria-label": "Mobile view",
             title: "Mobile (375px)",
-            children: "\u{1F4F1}"
+            children: mobileIcon
           }
         )
       ] }) }),
@@ -28149,7 +28186,7 @@ var Canvas = import_react44.default.memo(function Canvas2() {
             disabled: !canUndo,
             title: "Undo (Ctrl+Z)",
             "aria-label": "Undo",
-            children: "\u21A9"
+            children: undoIcon
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
@@ -28160,7 +28197,7 @@ var Canvas = import_react44.default.memo(function Canvas2() {
             disabled: !canRedo,
             title: "Redo (Ctrl+Shift+Z)",
             "aria-label": "Redo",
-            children: "\u21AA"
+            children: redoIcon
           }
         )
       ] })
@@ -28182,10 +28219,13 @@ var Canvas = import_react44.default.memo(function Canvas2() {
         children: [
           template.sections.map((section, index) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react44.default.Fragment, { children: [
             /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index }),
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { section })
+            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Section, { section, customIcons })
           ] }, section.id)),
           template.sections.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SectionDropZone, { index: template.sections.length }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: "+ Add Section" })
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("button", { className: `ee-add-section ${canvas_default.addSectionBtn}`, onClick: handleAddSection, "aria-label": "Add new section", children: [
+            customIcons?.addSection ?? "\u2795",
+            " Add Section"
+          ] })
         ]
       }
     ) })
@@ -29553,11 +29593,13 @@ var PREVIEW_WIDTHS = {
   desktop: 600,
   mobile: 375
 };
-function PreviewPanel() {
+function PreviewPanel({ customIcons }) {
   const { template } = useTemplateContext();
   const [html2, setHtml] = (0, import_react59.useState)("");
   const [previewMode, setPreviewMode] = (0, import_react59.useState)("desktop");
   const iframeRef = (0, import_react59.useRef)(null);
+  const desktopIcon = customIcons?.previewDesktop ?? "\u{1F5A5}\uFE0F";
+  const mobileIcon = customIcons?.previewMobile ?? "\u{1F4F1}";
   (0, import_react59.useEffect)(() => {
     let cancelled = false;
     const timer = setTimeout(() => {
@@ -29587,24 +29629,30 @@ function PreviewPanel() {
   }, [html2]);
   return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: `ee-preview ${preview_default.preview}`, children: [
     /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: `ee-preview-toggles ${preview_default.previewToggles}`, role: "group", "aria-label": "Preview size", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--desktop ${preview_default.previewToggle} ${preview_default.previewToggleDesktop} ${previewMode === "desktop" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
           onClick: () => setPreviewMode("desktop"),
           "aria-pressed": previewMode === "desktop",
           "aria-label": "Desktop preview",
-          children: "Desktop"
+          children: [
+            desktopIcon,
+            " Desktop"
+          ]
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
         "button",
         {
           className: `ee-preview-toggle ee-preview-toggle--mobile ${preview_default.previewToggle} ${preview_default.previewToggleMobile} ${previewMode === "mobile" ? `ee-preview-toggle--active ${preview_default.previewToggleActive}` : ""}`,
           onClick: () => setPreviewMode("mobile"),
           "aria-pressed": previewMode === "mobile",
           "aria-label": "Mobile preview",
-          children: "Mobile"
+          children: [
+            mobileIcon,
+            " Mobile"
+          ]
         }
       )
     ] }),
@@ -29686,7 +29734,7 @@ var EditorInner = (0, import_react61.forwardRef)(function EditorInner2(props, re
   const selection = useSelectionContext();
   const { clearPersisted } = useConfigContext();
   const containerRef = (0, import_react61.useRef)(null);
-  const { onReady, onSave } = props;
+  const { onReady, onSave, customIcons } = props;
   const [sidebarOpen, setSidebarOpen] = (0, import_react61.useState)(false);
   const [propertiesOpen, setPropertiesOpen] = (0, import_react61.useState)(false);
   const [pendingRemoval, setPendingRemoval] = (0, import_react61.useState)(null);
@@ -29874,21 +29922,22 @@ var EditorInner = (0, import_react61.forwardRef)(function EditorInner2(props, re
         propertiesOpen,
         onToggleSidebar: toggleSidebar,
         onToggleProperties: toggleProperties,
-        toolbarActions: props.toolbarActions
+        toolbarActions: props.toolbarActions,
+        customIcons
       }
     ),
     /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: editor_default.editorBody, children: [
       activeTab === "visual" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Sidebar, { blockDefinitions: props.blockDefinitions }) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Canvas, {}) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-sidebar ${sidebarClasses}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Sidebar, { blockDefinitions: props.blockDefinitions, customIcons }) }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-canvas ${editor_default.editorPanel} ${editor_default.canvasPanel}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Canvas, { customIcons }) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-properties ${propertiesClasses}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PropertiesPanel, {}) }) }),
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: overlayClasses, onClick: closeOverlays })
       ] }),
       activeTab === "source" && /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("div", { className: `ee-source-layout ${editor_default.sourceLayout}`, children: [
         /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-source-pane ${editor_default.sourcePane}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(SourceEditor, {}) }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PreviewPanel, {}) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-preview-pane ${editor_default.sourcePaneDivider}`, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PreviewPanel, { customIcons }) }) })
       ] }),
-      activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PreviewPanel, {}) })
+      activeTab === "preview" && /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(ErrorBoundary, { children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(PreviewPanel, { customIcons }) })
     ] })
   ] });
 });
@@ -29917,7 +29966,8 @@ var EmailEditor = (0, import_react61.forwardRef)(
       onSectionRemove,
       onSelectionChange,
       onTemplateLoad,
-      onHistoryChange
+      onHistoryChange,
+      customIcons
     } = props;
     let template = initialTemplate;
     if (!template && initialMJML) {
@@ -29950,6 +30000,7 @@ var EmailEditor = (0, import_react61.forwardRef)(
         onSelectionChange,
         onTemplateLoad,
         onHistoryChange,
+        customIcons,
         children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: `ee-editor-wrapper ${editor_default.editorWrapper} ${className || ""}`, style: style2, children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(EditorInner, { ref, ...props }) })
       }
     );