What is exactly required to have icons displayed for code blocks?

[kyrylolvov]

I am currently trying to implement it so icons are rendered near the file name.
This is the docs page https://fumadocs.vercel.app/docs/headless/mdx/rehype-code

This is my config

import { rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
import createMDX from "fumadocs-mdx/config";
import { transformerTwoslash } from "fumadocs-twoslash";

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  async redirects() {
    return [{ source: "/", destination: "/docs", permanent: true }];
  },
};

const withMDX = createMDX({
  rootContentPath: "./src/content",
  mdxOptions: {
    rehypeCodeOptions: {
      themes: {
        light: "catppuccin-latte",
        dark: "catppuccin-mocha",
      },
      transformers: [...rehypeCodeDefaultOptions.transformers, transformerTwoslash()],
    },
  },
});

export default withMDX(config);

And how I write the code blocks

```js title="config.js"
console.log('js');
```

But its not rendered with the js icon.

[fuma-nama]

Make sure to update to the latest versions

[kyrylolvov]

@fuma-nama
I have updated packages to latest versions

"fumadocs-core": "^12.4.2",
"fumadocs-mdx": "^8.2.33",
"fumadocs-ui": "^12.4.2",

Modified mdx-components

export function useMDXComponents(components: MDXComponents): MDXComponents {
  return {
    defaultComponents,
    pre: ({ title, className, icon, allowCopy, ...props }: CodeBlockProps) => (
      <CodeBlock title={title} icon={icon} allowCopy={allowCopy}>
        <Pre className={cn("max-h-[400px]", className)} {...props} />
      </CodeBlock>
    ),
    ...components,
  };
}

And this is my next.config

import { rehypeCode, rehypeCodeDefaultOptions } from "fumadocs-core/mdx-plugins";
import createMDX from "fumadocs-mdx/config";

/** @type {import('next').NextConfig} */
const config = {
  reactStrictMode: true,
  async redirects() {
    return [{ source: "/", destination: "/docs", permanent: true }];
  },
};

const withMDX = createMDX({
  rootContentPath: "./src/content",
  mdxOptions: {
    rehypeCodeOptions: {
      themes: {
        light: "catppuccin-latte",
        dark: "catppuccin-mocha",
      },
      transformers: [...rehypeCodeDefaultOptions.transformers],
    },
    rehypePlugins: [[rehypeCode]],
  },
});

export default withMDX(config);

But the icon is still not displayed

[fuma-nama]

Hmm when using with Fumadocs MDX, you don't need to add another rehype code plugin

[kyrylolvov]

For some reason I was passing code component to <MDX />. That fixed the issue

<MDX
  components={{
    pre: ({ ref: _ref, title, ...props }) => (
      <CodeBlock title={title}>
        <Pre {...props} />
      </CodeBlock>
    ),
  }}
/>;