By the v-icon
component of Vuetify, using mainstream material design icons is quite straightforward like:
<v-icon>home</v-icon>
Now, I wonder if animated material icons are supported and can be used in Vuetify in a similar fashion -I mean without having to add extra lines of css code etc. if possible.
In the examples, I have noticed the usage of fa-spin
for Font Awesome; yet it is out of scope. I am bound to Google's material icons library.
EDIT: The specific kind of behavior I need is in the video examples in transitions section here: https://material.io/design/iconography/animated-icons.html# [See how a play
button becomes pause
with a smooth animation when clicked].
The short answer is no. The v-icon
element currently renders icons from a webfont. Fonts cannot be animated in this way. You can apply simple fade, spin, scale, and flip animations to achieve a simple transition between two icons but the complex transitions you linked to in the Material Guidelines require much more work.
My recommendation is to use inline SVG icons which are available from the official icon set as well as the community driven icon set and animate between those using CSS animation, SMIL, or JavaScript.