Icons not loading when page loads

[silverview7]

Hi all,

I've been facing an issue where for example I am using the EuiFieldText or EuiDatePicker and the icons don't load in. Instead there's a grey box in place of where the icon should be.

Not sure whether its the way I'm implementing it or if its a known issue.

[miukimiu]

Hi @silverview7,

It seems that is something wrong with the way you're setting up EUI. Are you following these instructions?

https://eui.elastic.co/#/guidelines/getting-started#setting-up-your-application

[thompsongl]

Could also be related to #5463 if you are not using webpack to bundle your app.

[silverview7]

Using import { appendIconComponentCache } from '@elastic/eui/es/components/icon/icon'; then caching my needed icons fixed the issue

[github-actions]

👋 This issue hasn't seen activity in 3 days, so we're automatically closing this issue as answered. Please leave a comment if that's not the case, or if you have any remaining questions or issues.

[RickoNoNo3]

I incidentally discovered today that as long as the StrictMode is not opened, EuiIcon can be loaded correctly. However, React is officially recommended that to completely follow the strict mode requirements to avoid unknown BUGs, so it is a bit uncomfortable.

I'm not used to close the StrictMode, but now I have to.

[silverview7]

@RickoNoNo3 That's a great solution, and honestly better than caching all the icons individually. It's also fixed some other strange behaviors I have noticed while using this UI. Thing is StrictMode isnt used in production anyways so shouldn't be to big of a deal, as long as precautions are taken.

[chandlerprall]

We've had an internal report of icons not loading, and I've now reproduced in a fresh create-react-app in which our icons don't load. Looks like it is related to how strict mode changes React's rendering; I have a fix that works for create-react-app and will put up a PR once we confirm it fixes our internal case as well.