fix: don't sanitize icons in markdown

frontend/src/css/md.css

@@ -78,8 +78,14 @@ a .markdown iconify-icon:first-child {
   margin-inline-end: 0.4em;
 }
 
+iconify-icon {
+  display: inline-flex;
+  align-items: center;
+}
+
 /* align icons with buttons better */
 button .markdown .paragraph {
+  display: inline-flex;
   align-items: baseline;
   gap: 0.4em;
 

frontend/src/plugins/core/__test__/sanitize.test.ts

@@ -462,4 +462,31 @@ describe("sanitizeHtml", () => {
       `"<details><summary>Click me</summary><p>Hidden content</p></details>"`,
     );
   });
+
+  test("preserves iconify-icon custom element", () => {
+    const html = '<iconify-icon icon="lucide:leaf"></iconify-icon>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<iconify-icon icon="lucide:leaf"></iconify-icon>"`,
+    );
+  });
+
+  test("preserves iconify-icon with all attributes", () => {
+    const html =
+      '<iconify-icon icon="lucide:rocket" width="24px" height="24px" inline="" flip="horizontal" rotate="90deg" style="color: blue;"></iconify-icon>';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<iconify-icon icon="lucide:rocket" width="24px" height="24px" inline="" flip="horizontal" rotate="90deg" style="color: blue;"></iconify-icon>"`,
+    );
+  });
+
+  test("preserves self-closing iconify-icon", () => {
+    const html = '<iconify-icon icon="lucide:star" />';
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(
+      `"<iconify-icon icon="lucide:star"></iconify-icon>"`,
+    );
+  });
+
+  test("still removes other non-marimo/non-iconify custom elements", () => {
+    const html = "<some-custom-element>Content</some-custom-element>";
+    expect(sanitizeHtml(html)).toMatchInlineSnapshot(`"Content"`);
+  });
 });

frontend/src/plugins/core/sanitize.ts

@@ -75,7 +75,7 @@ export function sanitizeHtml(html: string) {
     // glue elements like style, script or others to document.body and prevent unintuitive browser behavior in several edge-cases
     FORCE_BODY: true,
     CUSTOM_ELEMENT_HANDLING: {
-      tagNameCheck: /^marimo-[A-Za-z][\w-]*$/,
+      tagNameCheck: /^(marimo-[A-Za-z][\w-]*|iconify-icon)$/,
       attributeNameCheck: /^[A-Za-z][\w-]*$/,
     },
   };

marimo/_smoke_tests/icons.py

@@ -8,7 +8,7 @@
 
 import marimo
 
-__generated_with = "0.15.5"
+__generated_with = "0.17.3"
 app = marimo.App()
 
 
@@ -92,11 +92,7 @@ def _(mo):
 
 @app.cell
 def _(mo):
-    mo.md(
-        f"""
-    ## {mo.icon('material-symbols:edit')} Icons in markdown
-    """
-    )
+    mo.md(f"""## {mo.icon('material-symbols:edit')} Icons in markdown""")
     return