title: Material design icons css rotation is not centered
body: <p>I'm trying to make a loading spiner with icon from <a href="https://materialdesignicons.com/" rel="nofollow noreferrer">https://materialdesignicons.com/</a> but <strong>the icon doesn't just rotate, it also moves slightly from the center.</strong></p>
  
  <p>I have these styles: </p>
  
  <pre><code>@keyframes spin-animation {
    to {
      -webkit-transform: rotate(360deg);
      transform: rotate(360deg);
    }
  }
  
  .spin:before {
    display: block;
    transform-origin: center center;
    -webkit-backface-visibility: hidden;
    -webkit-animation: spin-animation 2s linear infinite;
    animation: spin-animation 2s linear infinite;
  }
  </code></pre>
  
  <p>It's <code>&lt;i class="mdi mdi-something spin"&gt;</code> element. So it has added <code>:before</code> with content of the icon.
  This element sits in an absolutely positioned wrapper, with <code>display: flex</code>, horizontally and vertically centered.</p>
  
  <p>The problem is that when the icon rotates, it doesn't rotate around its center. The axis moves by a little. The icon doesn't stay in one centered position, instead it moves slightly.</p>
  
  <p><a href="https://i.stack.imgur.com/ua1sB.gif" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/ua1sB.gif" alt="the icon doesn&#39;t just rotate, it also moves"></a></p>
  
  <p>I've tried:</p>
  
  <ul>
  <li>Giving width and height to the <code>i</code> element</li>
  <li>Giving width and height to the <code>:before</code> element</li>
  <li>Moving the <code>spiner</code> animation from <code>i</code> to <code>:before</code></li>
  <li>Different styles which I've found on stackoverflow, e.g. <code>transform-origin: center center;</code></li>
  </ul>
  
  <p>The icon itself has the same <code>x</code> and <code>y dimensions</code> so it shouldn't be a problem. The dimensions change when it rotates, but I guess that's correct?</p>