Ion spinners not appearing

ionic-v1
1

For the life of me I can not discern why none of my ion-spinners are appearing.

My first thought is that it is because I am attempting to use them within the template parameter of the $ionicLoading service, and perhaps DOM within here does not get rendered by Angular and hence the tag is unrecognised.

My questions therefore are:

My broken implementation of the ion-spinners with my app.run function:

$rootScope.$on('loading:show', function () {
    $ionicLoading.show({
        template: '<p>Loading<br><ion-spinner icon="ripple" class="spinner-calm"></ion-spinner></p>'
    });
});

Along with this in the app.config:

$httpProvider.interceptors.push(function ($rootScope) {
        return {
            request: function (config) {
                    $rootScope.$broadcast('loading:show');
                return config
            },
            response: function (response) {
                $rootScope.$broadcast('loading:hide');
                return response
            }
        }
    });

The CSS applied to the ion-spinner’s class:

.spinner-calm svg {
  width: 28px;
  height: 28px;
  stroke: red; //#999;
  fill: red; //#999;
}

I think this may also be indicative of a broader issue where no SVG images seem to load within my app at all (until I changed them to png where everything worked fine), and I’ve been unable to find many people experiencing similar issues.

My system information is:

Your system information:

Cordova CLI: 5.0.0
Gulp version:  CLI version 3.8.11
Gulp local:   Local version 3.8.11
Ionic Version: 1.0.0-beta.14
Ionic CLI Version: 1.6.1
Ionic App Lib Version: 0.3.3
ios-deploy version: 1.5.0 
ios-sim version: 3.1.1 
OS: Mac OS X Yosemite
Node Version: v0.12.6
Xcode version: Xcode 6.3.2 Build version 6D2105

Thanks in advance for any advice!