title: How to change spin speed for 'fa-icon' element in angular font-awesome?
body: <p>I have the following HTML template in my component:</p>
  
  <pre><code>`
  &lt;fa-icon class="basketball" [icon]="['fas','basketball-ball']" size="2x" [spin]="true"&gt;&lt;/fa-icon&gt;
  `
  </code></pre>
  
  <p>This generates the following HTML DOM element</p>
  
  <pre><code>`
  &lt;fa-icon _ngcontent-c9="" class="basketball ng-fa-icon" size="2x" ng-reflect-icon-prop="fas,basketball-ball" ng-reflect-spin="true" ng-reflect-size="2x"&gt;
  
  &lt;svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="basketball-ball" class="svg-inline--fa fa-basketball-ball fa-w-16 fa-spin fa-2x" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512" style="
      animation-duration: 7s;
  "&gt;&lt;path fill="currentColor" d="..."&gt;&lt;/path&gt;&lt;/svg&gt;
  
  &lt;/fa-icon&gt;
  </code></pre>
  
  <p>`</p>
  
  <p>I then have a CSS property targeting <code>fa-spin</code> class to reduce the spin duration like this:</p>
  
  <pre><code>`
  .fa-spin{
   animation-duration: 7s;
  }
  </code></pre>
  
  <p>`
  This however, does not override the inner HTML svg element that is displayed by fa-icon. When manually add the inline CSS property of animation-duration to the svg element, it works as expected. For some reason I cannot target the svg class .fa-spin. Any ideas?</p>