Icons not visible on build

  • Using a quasar cli generated project that hasn’t any webpack changes, icons don’t display distributed on a remote server.

    When I’m in dev everything runs fine and icons display, but soon as I build and serve the distribution folder on Azure it displays only the icon names. Serving it local with quasar works fine as well.

    Any ideas what might be the problem?

  • Admin

    Check the publicPath in /config/index.js for production. Depends on what mode you use Vue Router on.

  • I’m using hash mode and it’s set as:

    publicPath: ’ ',

    The CSS and JS loads ok but the material icons don’t load. I tried manually using MDI and it loaded ok, just not using the quasar <i> tag formats.

  • Did you resolve this srmcguirt? I was having the same issue but was just I wasnt adding the mimemap in the web.config on Azure.

    <mimeMap fileExtension=“woff” mimeType=“application/font-woff” />

  • Hi, I’m having the same problem deploying to Azure. To fix this, I think I need to add a web.config file like below.
    How can I add a static file like this to the root?
    I can’t figure out how to add an extra file this in quasar.config.
    It keeps getting deleted if I just add it to the dist folder myself.

    <?xml version=“1.0”?>
    <remove fileExtension=".woff"/>
    <mimeMap fileExtension=".woff" mimeType=“application/font-woff” />
    <remove fileExtension=".woff2"/>
    <mimeMap fileExtension=".woff2" mimeType=“font/woff2” />

Log in to reply