nuxt icon indicating copy to clipboard operation
nuxt copied to clipboard

Missing Material Icons when offline with @nuxt/pwa module

Open MtDalPizzol opened this issue 6 years ago • 1 comments

When adding the @nuxt/pwa module and accessing the project offline the Material Icons are missing.

The problem is that the icons font is loaded from the Google Fonts API by adding a link property to the head object on the nuxt.config.js file.

The favicon.ico is also overriding the icon options from the pwa module. It would be nice to explicit this on the docs.

Workaround for the icons:

Remove the link prop for the Google API font from the head object;

Install Material Icons from NPM.

yarn add material-design-icons

Add the font css to nuxt.config.js

  css: [
    'material-design-icons/iconfont/material-icons.css',
    '~/assets/style/app.styl'
  ]

Workaround for the favicon:

Just remove the line for the favicon from the nuxt.config.js.

MtDalPizzol avatar Feb 28 '18 13:02 MtDalPizzol

For me this is working, but some errors like:

nuxt:render Rendering url /node_modules/vuetify/src/stylus/components/_select.css.map +668ms { statusCode: 404, path: '/node_modules/vuetify/src/stylus/components/_select.css.map', message: 'This page could not be found' } are after change comming ... This vuetify module doesnt have the map file anymore ...

After fresh installation i have always this error: nuxt:render Rendering url /_nuxt/a25bbe8f4a3610ad80ca.hot-update.json +0ms { statusCode: 404, path: '/_nuxt/a25bbe8f4a3610ad80ca.hot-update.json', message: 'This page could not be found' }

ebors avatar Aug 08 '18 19:08 ebors