Onsen UI v-ons-icon not working

Question

I just install new pwa onsen UI project for vue-cli using npm. All components working properly only icon components not showing icon while running app. Even, I uncomment from v-ons-components file v-ons-icon still its not working

Answer 1

I also wasn't seeing v-ons-icon components although everything else showed. The icons did show when in npm run dev but not after npm run build when opening the app from the built index.html file or running the app in the android emulator.

I got errors like GET file:///Users/[username]/[appname]/www/dist/static/css/static/fonts/fa-solid-900.132e975.ttf net::ERR_FILE_NOT_FOUND` and the file it was looking for would be in the place it was looking for, just without the "css" folder.

For example, the build would point to a www/dist/static/css/static/fonts/ folder for the font files, although it had placed those files in a www/dist/static/fonts folder. ... it was assuming a "css" folder to be there that wasn't there. The build process was somehow extracting the fonts reference into an additional "css" folder.

Since fonts were working in dev but not build, I compared webpack.dev.conf.js to webpack.prod.conf.js.

The webpack.prod.conf.js file contained extract: true inside of rules: utils.styleLoaders. This "extract" setting was not contained in the webpack.dev.conf.js file, so I deleted extract: true from webpack.prod.conf.js ... and then, when I ran npm run build again, the v-ons-icon components showed!