how would you make an icon spin indefinitely? about angular-material-icons HOT 3 CLOSED

Well, wanted to encourage re-use.

This is the css relevent to fa-spin & fa-pulse:

.fa-spin {
  -webkit-animation: fa-spin 2s infinite linear;
  animation: fa-spin 2s infinite linear;
}
.fa-pulse {
  -webkit-animation: fa-spin 1s infinite steps(8);
  animation: fa-spin 1s infinite steps(8);
}
@-webkit-keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}
@keyframes fa-spin {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(359deg);
    transform: rotate(359deg);
  }
}

For other animation effects, you may copy / paste parts from font-awesome.css or include it entirely.

from angular-material-icons.

This can be achieved by CSS.
You may include font-awesome.css, set class="fa-spin" and it should work.

from angular-material-icons.

It's a pretty bad suggestion to bring in a whole other icon library just because they have spinning icons.

Here's what they have:
animation: fa-spin 2s infinite linear

I've tried applying this to the SVG, the SVG container (ng-md-icon), and other elements with no success. [edit] Turns out I forgot the keyframes. Whoops.

from angular-material-icons.