Vuetify: [Feature Request] v-icon should have rotate props (good to have)

[mahammad8564]

Problem to solve

v-icon should allow to rotate icon

Proposed solution

rotate props with options [45, 90, 180, 270]

.rotate-45 {
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.rotate-90{...}
.rotate-180{...}
.rotate-270{...}

[SeregPie]

Also needs a flip (or mirror) prop.

[SeregPie]

Just realized it can be done via classes. Which is even better, because some components have multiple icons as properties and you can pass the transformed icon as mdi-airplane rotate-180.

https://codepen.io/SeregPie/pen/MWKoaqK

What Vuetify maybe need, are those helper classes for the icons. For example Font Awesome has them already.

[MajesticPotatoe]

you can use the native icon rotate helper classes eg:
<v-icon>mdi-github mdi-rotate-90</v-icon>
https://codepen.io/majesticpotatoe-the-bashful/pen/NWxgxKP

[SeregPie]

Oh. I did not know that there are already mdi classes for that. I guess this issue can be closed if @mahammad8564 agrees.

[Mert75]

Solution provided by MajesticPotatoe.