<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> I have searched the <a href="https://github.com/zeit/next.js/issues?q=is%3Aissue">issues</a> of this repository and believe that this is not a duplicate.</li>
</ul>
<h2 dir="auto">Expected Behavior</h2>


<h2 dir="auto">Current Behavior</h2>


<h2 dir="auto">Steps to Reproduce (for bugs)</h2>


<ol dir="auto">
<li></li>
<li></li>
<li></li>
<li></li>
</ol>
<h2 dir="auto">Context</h2>


<h2 dir="auto">Your Environment</h2>

<table role="table">
<thead>
<tr>
<th>Tech</th>
<th>Version</th>
</tr>
</thead>
<tbody>
<tr>
<td>next</td>
<td></td>
</tr>
<tr>
<td>node</td>
<td></td>
</tr>
<tr>
<td>OS</td>
<td></td>
</tr>
<tr>
<td>browser</td>
<td></td>
</tr>
<tr>
<td>etc</td>
<td></td>
</tr>
</tbody>
</table>
<h1 dir="auto">Bug report</h1>
<p dir="auto">css content strings added for icons appear as stings not as icons</p>
<h2 dir="auto">Describe the bug</h2>
<p dir="auto">a css class defined as<br>
<code class="notranslate">.a::before { content: '\f054'; }</code><br>
dont render the icon, instead some text is displayed<br>
A clear and concise description of what the bug is.</p>
<h2 dir="auto">To Reproduce</h2>
<p dir="auto">USe this code sandbox to view the issue and a probable workaround with scss<br>
<a href="https://codesandbox.io/s/async-wind-uj7z6" rel="nofollow">https://codesandbox.io/s/async-wind-uj7z6</a><br>
Steps to reproduce the behavior, please provide code snippets or a repository:</p>
<ol dir="auto">
<li>Create a css class with 'content' eg: a.css<br>
<code class="notranslate">a::before {   content: '\f054'; }</code></li>
<li>import the css class into the react component<br>
<code class="notranslate">import css from "../style/a.css";</code></li>
<li><code class="notranslate">&lt;style jsx&gt;{css}&lt;/style&gt;</code> in the component to render the styles</li>
<li>in the render function add html in a way that the class will get selected<br>
eg:<br>
<code class="notranslate">&lt;a&gt;Hi&lt;/a&gt;</code></li>
</ol>
<h2 dir="auto">Expected behavior</h2>
<p dir="auto">The icon should render instead of the text</p>
<h2 dir="auto">Screenshots</h2>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/3959554/73247859-d2e1aa00-41d7-11ea-84af-63f10f4f5b44.png"><img src="https://user-images.githubusercontent.com/3959554/73247859-d2e1aa00-41d7-11ea-84af-63f10f4f5b44.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">If applicable, add screenshots to help explain your problem.</p>
<h2 dir="auto">System information</h2>
<p dir="auto">-package.json dev deps<br>
<code class="notranslate">"devDependencies": { "cross-env": "^5.2.0", "node-sass": "^4.7.2", "sass-loader": "7.1.0" },</code><br>
-next.config.js<br>
`<br>
module.exports = {<br>
webpack: (config, { defaultLoaders }) =&gt; {<br>
config.module.rules.push({<br>
test: /.scss|css$/,<br>
use: [<br>
defaultLoaders.babel,<br>
{<br>
loader: require('styled-jsx/webpack').loader,<br>
options: {<br>
type: 'scoped'<br>
}<br>
},<br>
'sass-loader'<br>
]<br>
})</p>
<div class="snippet-clipboard-content notranslate position-relative overflow-auto" data-snippet-clipboard-copy-content="  return config
}"><pre class="notranslate"><code class="notranslate">  return config
}
</code></pre></div>
<p dir="auto">}<br>
`</p>
<ul dir="auto">
<li>Browser Chrome</li>
<li>Version of Next.js: seems to be broken in v9, v9.1 and v9.2, works fine in v7 and v8 though</li>
</ul>
<h2 dir="auto">Additional context</h2>
<p dir="auto">Seems like a issue related to the style-jsx version that is bundled<br>
<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="507529894" data-permission-text="Title is private" data-url="https://github.com/vercel/styled-jsx/issues/589" data-hovercard-type="issue" data-hovercard-url="/vercel/styled-jsx/issues/589/hovercard" href="https://github.com/vercel/styled-jsx/issues/589">vercel/styled-jsx#589</a>, i have commented my findings  and workaround in that issue as well</p>