[Bug Report] Vuetify doesn't work properly with FontAwesome SVGs
See original GitHub issueEnvironment
Vuetify Version: 2.3.20 Vue Version: 2.6.12 Browsers: Firefox 83.0 OS: Mac OS 10.15
Steps to reproduce
- Create and include a FontAwesome SVG kit
- Add an icon, e.g.
<v-icon>fas fa-trash</v-icon>
- Flip to dark mode
Expected Behavior
Icon should be white (as when using FontAwesome webfont mode)
Actual Behavior
Icon remains the same color (the theme class is not updated on the svg)
Reproduction Link
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (3 by maintainers)
Top Results From Across the Web
Font-awesome SVG icons not working with Vuetify
The main problem is that it should change the prebuilt component's icons as far as I understand it otherwise you would need to...
Read more >Icon Fonts — Vuetify
Font Awesome SVG Icons Add required dependencies. Then add globally font-awesome-icon component and set faSvg as iconfont in Vuetify config.
Read more >Font Awesome icons in Vue.js apps: A complete guide
The Font Awesome icon collection is a library of free, easy-to-use icons. In this tutorial, learn to add those icons to your Vue.js...
Read more >How to properly use FontAwesome in a Vue project in 2020?
Yes. It's a heavy process I admit, but it has benefits for performance. Everything's explained on the library's readme: Why use the concept...
Read more >Vuetify Custom Icons Documentation is Horrendous : r/vuetifyjs
Not sure if this is the right place at all. I just googled "vuetify documentation is bad" and found this sub so I...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
In v2.4 you can use the new global
icons.component
property to integrate something like iconify: #7821https://vuetifyjs.com/en/features/icons/#font-awesome-svg-icons