Material Icons not displaying on Azure hosted Vue/Quasar web app

Question

I have a webapp created using Vue and Quasar. In my quasar-user-options.js file I have added the required icon imports.

import '@quasar/extras/material-icons/material-icons.css'
import "@quasar/extras/material-icons-outlined/material-icons-outlined.css";

When developing locally, the icons are displayed fine. It is when the web application is deployed to an Azure App Service when the icons appear as text.

I have attempted to add the required @font-face and googleMaterialIcons.woff2 file as necessary to the application, but am unsure where it should be (or if it's the correct solution at all). Any suggestions/ideas?

Thanks!

Answer 1

The App Service Sandbox will block you from installing custom fonts. The workaround is migrating your app to a container where you can leverage the image to install and configure the custom font.