Materialdesign: spin-reverse

[infanf]

I just ran into this issue when using mdi-spin with the sync icon. The arrows point counterclockwise but it spins clockwise.
It would be great if this could be added to the CSS:

.mdi-spin-reverse:before {
    -webkit-animation: mdi-spin-reverse 2s infinite linear;
    animation: mdi-spin-reverse 2s infinite linear;
}

@-webkit-keyframes mdi-spin-reverse {
    0% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

@keyframes mdi-spin-reverse {
    0% {
        -webkit-transform: rotate(359deg);
        transform: rotate(359deg);
    }
    100% {
        -webkit-transform: rotate(0deg);
        transform: rotate(0deg);
    }
}

[goyney]

We are starting to push people away from the webfont because the size of it continues to grow. This leads to a bigger burden on sites using the webfont. That being said, I'm not sure if @Templarian is interested in adding new functionality to the webfont.

I'm going to leave this open for now and let Templarian chime in here, but in the meantime, if you happen to be using React, please check out https://www.npmjs.com/package/@mdi/react. The spin prop allows you to choose the direction.

[Templarian]

Almost every icon is setup to spin clockwise. Adding a reverse spin seems a tad underused. If someone needs it I would say they could just write their own solution.

I'm not against putting this in the documentation.

[PeterShaggyNoble]

In this specific instance, an alternative would be to use the autorenew icon instead.

[JamesCoyle]

Closing this out as the solution is trivial to implement and we are no longer recommending the icon font for web use.