Semantic-ui-react: Icons are not displaying (fonts not loading in CRA)

[tusharkhatiwada]

Steps

Trying to use <Icon name="search" />, but no icons are displaying.
https://codesandbox.io/s/8nzy51pk49

Expected Result

Icon should be displaying.

Actual Result

Icon are rendered as box.

Version

"semantic-ui-react": "^0.79.1"
"semantic-ui-css": "^2.3.1",

Testcase

created a codesandbox project here: https://codesandbox.io/s/8nzy51pk49

[levithomason]

This is a codesandbox issue. They are failing to decode the downloaded fonts for some reason. Apparently, it is failing for both SUI CSS 2.2.14 and 2.3.1, so it is not a version issue or CSS update problem.

Note, our docs still work using the exact same CSS sheet loaded in a real browser scenario:
https://react.semantic-ui.com/elements/icon

Here's the codesandbox error:

:warning: Failed to decode downloaded font: https://98w7j7ymo4.codesandbox.io/themes/default/assets/fonts/icons.woff2

[tusharkhatiwada]

@levithomason
I think it's not just codesandbox issue. It's failing in my project too. I'm using create-react-app for the project.

[levithomason]

We'd love to look at a minimal reproduction. Please use a new issue. At present, it is working in our doc build and other prod apps.

[edgarlpassos]

I'm having the same problem, also using create-react-app

[levithomason]

Appears we have a trend. What are the errors you are seeing @edgarlpassos and @tusharkhatiwada?

[tusharkhatiwada]

@levithomason I had done a silly mistake. I tried to reproduce the issue by creating a basic project with CRA that just displays the Icon. It worked though.
So I checked my project thoroughly. What I did was, in order to replace the default font with Open Sans, I had used in my css:

* {
font-family: 'Open Sans';
}

:)

[levithomason]

Heh, nice! 😉 Codesandbox is still a mystery for now, so I'll leave this open for a bit.

[edgarlpassos]

Exactly the same was happening to me! Really a silly mistake.

[levithomason]

Thanks for the report.

Also, codesandbox seems to have an issue with their loaders for resolving fonts in CSS files. If you use an "external" dependency and add CSS sheet via a CDN it works:

Here's the original codesandbox updated to use a CDN which also now works:

https://codesandbox.io/s/mzq3lvq7jj

[HemalR]

Hi guys, this has come up again (came up a bit randomly where it was only affecting about half the icons I was using). Updating the css from 2.2.12 to 2.3.3 fixes most of them, but not all (at the expense of the modal positioning issue, which has workarounds).

Anyway, I've forked your Codesandbox @levithomason to demonstrate this: https://codesandbox.io/s/x285o7l7kw

Related question (forgive me for the noobie questions) - the styling and css is working on that CodeSandbox, but unlike the one originally created by @tusharkhatiwada I cannot see where these css styles are getting loaded from? (I was trying to see what version of the css it was using).

[brianespinosa]

@HemalR with the way SUIR is decoupled from the CSS almost entirely, we only support the latest version of SUI css, so updating to the latest version as you did is indeed the fix.

[HemalR]

Cheers for taking the time and having alook @brianespinosa 👍

Any idea why that codeSandbox isn't working? - https://codesandbox.io/s/x285o7l7kw (which is forked from https://codesandbox.io/s/mzq3lvq7jj from @levithomason above - the only change being the icon name provided from 'user' to 'trash outline'

[brianespinosa]

@HemalR you are trying to use an icon name that does not exist in the latest version of FontAwesome. That was an update in 2.3.x in SUI styles. Take a look at the Icon docs and do a search for "trash". You will not see "trash icon" as an available icon name in the set. However, it looks like the Icon you are looking for is "trash alternate outline", which I just tested in your codepen using the latest SUI styles and it works.

[HemalR]

Ah I see it. Missed the name change, sorry for the silly qn but hopefully someone who reads this will double check to ensure an update hasn't done the same thing to them.

Thanks again 👍