the way to fix this, is not using the the svg icon at all, by replacing the template. I already ask on git driftyco/ionic regarding the issue. Ionic 2.0 will replace rotating icon. But for the time being you need to hack it. this might be a solution;
$ionicLoading.show({
template: '<i class="spinner-a">Loading..</i>',
animation: 'fade-in',
showBackdrop: true,
maxWidth: 400,
showDelay: 0
});
}
Add this to style.css,
.spinner-a {
display:block;
font-size: 6px;
position: relative;
text-indent: -9999em;
border-top: 1.1em solid rgba(255, 255, 255, 0.2);
border-right: 1.1em solid rgba(255, 255, 255, 0.2);
border-bottom: 1.1em solid rgba(255, 255, 255, 0.2);
border-left: 1.1em solid #ffffff;
-webkit-animation: load8 1.1s infinite linear;
animation: load8 1.1s infinite linear;
}
.spinner-a,
.spinner-a:after {
border-radius: 50%;
width: 10em;
height: 10em;
}
.spinner-a.min {
margin: 2em auto;
font-size: 3px;
border-top: 1.1em solid rgba(25, 25, 25, 0.2);
border-right: 1.1em solid rgba(25, 25, 25, 0.2);
border-bottom: 1.1em solid rgba(25, 25, 25, 0.2);
border-left: 1.1em solid #7A7A7A;
}
@-webkit-keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes load8 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.refreshing-spinner{
-webkit-backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
backface-visibility: hidden;
transform-style: preserve-3d;
}
.scroll-refresher .refreshing-spinner{
display:none
}
.scroll-refresher.active.refreshing .refreshing-spinner{
display:block;
}
To extend this for ionInfiniteScroll and ionRefresher you need to modify the ionic.bundle.js or any of the ionic lib you using( line might be different)
on line 41660 change to this,
template: '<i class="{{spinner()}} min refreshing-spinner"></i>',
on line 41685-87 change to this,
$scope.spinner = function() {
return angular.isDefined($attrs.spinner) ? $attrs.spinner : 'spinner-a';
};
on line 43243 change to this,
'<i class="{{spinnerType}} min refreshing-spinner"></i>' +
on line 43251-53 change to this,
if (angular.isUndefined($attrs.spinnerType)) {
$attrs.$set('spinnerType', 'spinner-a');
}
on line 43258 change to this,
spinnerType: '@',
if you need the minified version likely you need to git clone driftyco/ionic and make changes on it and run gulp.