Make Vuetify icons display properly while loading a page from the local filesystem

Question

Make Vuetify icons display properly while loading a page from the local filesystem

I have set up a vue project using vue cli 3 and integrated Vuetify v2.0.19.

One of the requirements for my project is to be able to compile it into a single HTML file so that it can be downloaded and run offline in a phonegap app (specifically on Safari v13). While I've been successful in meeting most of the project's needs, one issue persists - the icons are not displaying correctly. Whenever I use

<v-icon>info</v-icon>

, for instance, instead of the icon rendering, it simply shows the word INFO.

I've followed the instructions provided in the Vuetify Quick-Start guide, Icons documentation, Browser Support resources, and numerous threads on Stack Overflow, but have yet to find a solution to this problem.

My main objective is to include the necessary fonts within the single build file. When loading the page on the phonegap app or serving it from the filesystem, I consistently receive 'not found' errors in the console like

(file:///D:/fonts/materialdesignicons-webfont.27cb2cf1.woff2)

. Although I understand that the path is incorrect, how can I ensure that the icons are part of the built file?

Is there a way to achieve this?

In order to generate the single html file with embedded js and css, I made use of npm packages such as html-webpack-plugin and

html-webpack-inline-source-plugin

. Additionally, the following configurations were added to my vue.config.js file:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const HtmlWebpackInlineSourcePlugin = require('html-webpack-inline-source-plugin');
module.exports = {
    css: {
        extract: false,
    },
    configureWebpack: {
      optimization: {
        splitChunks: false
      },
      plugins: [
        new HtmlWebpackPlugin({
          filename: 'output/output.html',
          template: 'src/output-template.html',
          inlineSource: '.(js|css)$' // embed all javascript and css inline
        }),
        new HtmlWebpackInlineSourcePlugin()
      ]
    },
    transpileDependencies:[/node_modules[/\\\\]vuetify[/\\\\]/]
  }

Furthermore, in the src/plugins/vuetify.js file:

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import '@mdi/font/css/materialdesignicons.css'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdi',
  }
})

javascript vue.js vuetify.js

Answer 1

Answer №1

After going through some trial and error, I finally managed to make it work just the way I wanted by following the instructions provided here.

 // plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg'
  }
})

In the components where I am using the icons (such as the mdi information icon)

<template>    
    ...
       <v-icon>{{svgPath}}</v-icon>
    ...
</template>
<script>
import {mdiInformation} from '@mdi/js'
  export default {
      ...
      data() {
          return {
              svgPath: mdiInformation
          }
      }
  }
</script>

Answer 2

After going through some trial and error, I finally managed to make it work just the way I wanted by following the instructions provided here.

 // plugins/vuetify.js

import Vue from 'vue'
import Vuetify from 'vuetify/lib'

Vue.use(Vuetify)

export default new Vuetify({
  icons: {
    iconfont: 'mdiSvg'
  }
})

In the components where I am using the icons (such as the mdi information icon)

<template>    
    ...
       <v-icon>{{svgPath}}</v-icon>
    ...
</template>
<script>
import {mdiInformation} from '@mdi/js'
  export default {
      ...
      data() {
          return {
              svgPath: mdiInformation
          }
      }
  }
</script>

Make Vuetify icons display properly while loading a page from the local filesystem

Answer №1

Similar questions

Having trouble configuring the drizzle vue plugin to work with vuejs 2

Keep the first column of an HTML table fixed as you scroll horizontally

The script I added is malfunctioning when I utilize laravel/ui

Steps for storing API information in localStorage:1. Retrieve the API data

Ways to transmit information from a modal to a function

How can I implement a feature in Django where clicking on a form will automatically clear the initial text within it?

Using Jquery to handle input data in a form

Angular not updating the values in real time

Should I include all components in the app.js file or import them directly into the Vue component?

How can we automatically add dividers after a certain number of elements in CSS?

What are the benefits of removing event listeners in Reactjs?

Guide on implementing EdgesHelper with imported Collada model using three.js

What is the process for changing a JavaScript date to the Hijri format?

The response was blocked by CORB due to cross-origin content with a MIME type of text/html

Adjust the position of the background when hovering with the mouse to create a right

Is the lack of style in PHP echo using Ajax causing issues?

Show selected options from 2 dropdown menus on a separate page

"Android Webview's evaluateJavascript function is not returning the expected value

Is there a way to showcase my HTML model data in a <textarea> similar to how it appears in a web browser?

Organize my JavaScript code by implementing a function