How to change spin speed for 'fa-icon' element in angular font-awesome?

Question

I have the following HTML template in my component:

`
<fa-icon class="basketball" [icon]="['fas','basketball-ball']" size="2x" [spin]="true"></fa-icon>
`

This generates the following HTML DOM element

`
<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">

<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;
"><path fill="currentColor" d="..."></path></svg>

</fa-icon>

`

I then have a CSS property targeting fa-spin class to reduce the spin duration like this:

`
.fa-spin{
 animation-duration: 7s;
}

` 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?

Answer 1

Add the css to global style.css. For example:

.fa-spin {
  animation: fa-spin 1s infinite linear !important;
}