Icomoon font will not be rendered with emotion enabled

Verify canary release

• I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
  Platform: darwin
  Arch: x64
  Version: Darwin Kernel Version 21.6.0: Sat Jun 18 17:07:25 PDT 2022; root:xnu-8020.140.41~1/RELEASE_X86_64
Binaries:
  Node: 14.15.0
  npm: 7.11.1
  Yarn: 1.22.18
  pnpm: N/A
Relevant packages:
  next: 12.3.1-canary.0
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0

What browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

Describe the Bug

Background Since we switched to nextjs@12 we only got minified css classes on development for our @emotion styles.

The Problem Now we tried to enable emotion with the compiler.emotion = true configuration. With that emotion works well except our icomoon font. The icomoon font will be loaded and added to the styles… but not rendered. I’m not sure what the problem is exactly, for me all the things looks well.

Expected Behavior

Icons should be rendered as a font

Link to reproduction

https://github.com/dominikmatt/nextjs-emotion

To Reproduce

• Add emotion to your nextjs project
• Add a emotion component and define all the icons inside of it
• Enable emotion on next-configuration

const nextConfig = {
  compiler: {
    emotion: true, // Change to false to get the icon rendered
  },
}

[rubytree33]

That’s up to the maintainers, since I can’t merge the PR myself.

[rubytree33]

Taking a look at this.