No icons shown in menu bar, only text

[samlhuillier]

I am trying to add in a menu item to my editor but it seems to just add it as text and no actual icons. This is what it looks like:

This is my config in React (18.2.0) and an electron app:

  const { editor, getInstance } = useEditor(
    (root) =>
      Editor.make()
        .config((ctx) => {
          ctx.set(rootCtx, root);
          ctx.set(defaultValueCtx, content);
          ctx
            .get(listenerCtx)
            .beforeMount((ctx) => {
              console.log("beforeMount");
            })
            .mounted((ctx) => {
              console.log("mounted");
              insert("# Default Title");
            })
            .updated((ctx, doc, prevDoc) => {
              console.log("updated", doc, prevDoc);
              console.log("updated JSON", doc.toJSON());
            })
            .markdownUpdated((ctx, markdown, prevMarkdown) => {
              console.log(
                "markdownUpdated to=",
                markdown,
                "\nprev=",
                prevMarkdown
              );
              setContent(markdown);
            })
            .blur((ctx) => {
              console.log("when editor loses focus");
            })
            .focus((ctx) => {
              const view = ctx.get(editorViewCtx);
              console.log("focus", view);
            })
            .destroy((ctx) => {
              console.log("destroy");
            });
        })
        .use(
          tooltip.configure(tooltipPlugin, {
            bottom: true,
            items: (ctx: Ctx) => {
              const marks = ctx.get(schemaCtx).marks;
              const nodes = ctx.get(schemaCtx).nodes;
              return [
                createToggleIcon("bold", "OK", marks.strong, marks.code_inline),
              ];
            },
          })
        )
        .use(nord)
        .use(commonmark)
        .use(gfm)
        .use(history)
        .use(listener)
        .use(prism)
        .use(menu)
        .use(block)
        .use(cursor)
        .use(clipboard)
    // .use(slash)
  );

How can I fix this? Is there some styling that I am missing?

[natsuki-engr]

Its icon is by Material Icons, ligature font.
You need to load the font from below page and set font-family: "Material Icons" in stylesheet.
https://developers.google.com/fonts/docs/material_icons?hl=en#setup_method_1_using_via_google_fonts