When I try to use a v-icon, I am not able to see the icon but just a square as shown in the image attached. all the other vuetify components work fine.
I am using it just like this <v-icon> mdi-domain </v-icon>
I have tried import "#mdi/font/css/materialdesignicons.css"; in main.js but it has not worked. I dont want to use the CDN link.
It is also not showing up in the expandable vuetify table.
Related
I'm trying to add a file input that will open only by clicking on the icon
Only Vuetify2 works (by using hide input ), not Vuetify3
Why is this happening? What should I do when there are so many differences between versions?
<v-file-input
hide-input
truncate-length="15"
I'd like to use the md-card material from Vue Material in an existing application. The example on the website (https://vuematerial.io/components/card/) uses the following:
<template>
<div>
<md-card>
...
</md-card>
<md-card md-with-hover>
...
</md-card>
</div>
</template>
When I use this in the HTML page and create a Vue object for the containing div, the components do show, but the layout is not working. I have tinkered with the layout classes, but the behavior is not matching the example. How can I configure the layout in a plain HTML page to match the example's layout behavior? Is the example page adding another layer to the example div to create the layout behavior?
Updated: I tried a similar scenario in JsFiddle, and it works perfectly: https://jsfiddle.net/w9m6q05f/3/ . In my application, the cards are always in a column regardless of the width of the view, and the bottom card is stretched towards the bottom of the view. Do I need to set the class of the containing div? It may be getting overwritten by my application somewhere else.
Update 2: The culprit is which has height: 100%
I have a library of icons (icon system) in svg. Each svg has his own component inside Vue in the same way as Sarah Drasner's icon system.
I want to import an svg into a js library which allow only icon provided with url. I could have a separate svg file, but I want to style dynamically the fill color with my color system.
The only way I've found is to render and encode the component into base64.
I've found a simple helper for React, but I'm struggling to reproduce the idea with Vue, Vue.Compile, Render, etc.
I'm trying to implement FontAwesome5 to my website with NPM and Webpack. Here is my code:
import fontawesome from '#fortawesome/fontawesome'
import faFacebookF from '#fortawesome/fontawesome-free-brands/faFacebookF'
import faYoutube from '#fortawesome/fontawesome-free-brands/faYoutube'
import faInstagram from '#fortawesome/fontawesome-free-brands/faInstagram'
fontawesome.library.add(faYoutube)
fontawesome.library.add(faFacebookF)
fontawesome.library.add(faInstagram)
The situation is: only the first icon added in with fontawesome.library.add works and others - not. In this example only Youtube icon is rendered and other looks like that:
If I just change the order and put Facebook icon to the top like that:
import fontawesome from '#fortawesome/fontawesome'
import faFacebookF from '#fortawesome/fontawesome-free-brands/faFacebookF'
import faYoutube from '#fortawesome/fontawesome-free-brands/faYoutube'
import faInstagram from '#fortawesome/fontawesome-free-brands/faInstagram'
fontawesome.library.add(faFacebookF)
fontawesome.library.add(faYoutube)
fontawesome.library.add(faInstagram)
Only Facebook icon will work like that:
There were no other changes in JS or HTML, just the icons order. If I put ath the top another icon which is not used in my HTML - all 3 icons will be empty.
Could you please help me with this strange issue?
P.S there are no js issues in devtools or in webpack at all
As only one pack was in use - 'fontawesome-free-brands' you should use coma separated list like that:
fontawesome.library.add(faFacebookF,faYoutube,faInstagram)
I am using ag-grid in my project which uses vuetify.js and is based on vueJS. I am facing problems with the ag-grid themes. Whenever I use the ag-material theme the outcome is different from the one shown ag-grid website. I just get a very basic theme when I add material theme. Can anyone help?
you need to make sure you import both
import "/node_modules/ag-grid/dist/styles/ag-grid.css";
import "/node_modules/ag-grid/dist/styles/theme-material.css";
and then, make sure you include both classes <ag-grid-vue class="ag-material ag-theme-material">