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?
    Thanks


  • 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.
    Thanks
    –Andy

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