Can't load icons

[ghost]

Version

1.1.0

Reproduction link

https://github.com/sc4224/typescript-graphql

Operating System

Mac OSX Catalina

Device

iMac

Browser & Version

Chrome 83.0.4103.61

Steps to reproduce

1. git clone the repo
2. execute yarn
3. execute yarn dev
4. Go to http://localhost:3000
5. Imported the scss and css files as instructed
   import 'argon-design-system-react/src/assets/vendor/nucleo/css/nucleo.css';
import 'argon-design-system-react/src/assets/vendor/font-awesome/css/font-awesome.min.css';
import 'argon-design-system-react/src/assets/scss/argon-design-system-react.scss';
6. Open Sans font is loading, but Icons on the Input field are not loading.

What is expected?

Icons to load for valid and invalid Input fields

What is actually happening?

Icons are not loading, square box placeholder is showing up where the icon should be

---

Solution

Additional comments

[einazare]

Hello there, @sc4224

Please check our live docs here: https://demos.creative-tim.com/argon-design-system-react/#/documentation/quick-start

Best,
Manu

[ghost]

Hey @einazare I've already checked the docs and followed the instructions as stated where I import the css files. It does not work though, what am I doing wrong?

[einazare]

Hello again, @sc4224 ,

Have you also added the fonts inside the .html file?

Best,
Manu

[ghost]

@einazare yes I've tried that, included the font in the html. Still does not work

[ghost]

@einazare have you tried to work this with the nextjs framework?

[einazare]

Hello again, @sc4224 ,

Unfortunately, no, we haven't tried it with NextJS, from what we know, NextJS has other ways of importing CSS/SCSS, that might be the cause.
We will investigate this and come back with a response.
In the meantime, any insights are welcomed.

Best,
Manu

[ghost]

@einazare the things i've tried so far was to install url loader and configure webpack through next.config.js. It does not seem to do the job for me. CSS and SCSS imports were done correctly through libraries next-sass, next-css and next-fonts. As you can see in the picture the styling was included, it was just the icon could not load.

[einazare]

Hello again, @sc4224 ,

I am sorry, but at the moment, we've only worked with NextJS and our material products: https://www.creative-tim.com/templates/nextjs
Also, if you check our unaltered products: https://www.creative-tim.com/product/argon-design-system-react
You will see that it works without any issues.
We are sorry, but we cannot help you further.

I will leave this issue open, and maybe someone from our community will come to your help.

Best,
Manu

[yassinetb]

Fixed the issue by downgrading the react-script version to 3.4.4. Solution found from here:
facebook/create-react-app#9992

[einazare]

Hello there guys,

I think for font, you could use the following: https://www.npmjs.com/package/next-fonts

Best,
Manu