This AngularJS directive allows changing the color of dynamically loaded SVG files. Subject to same domain policy.

vod-svg.js

angular
        .module('241App.site.directives', [])
        .directive('pmtMap', mapDirective)
        .directive('pmtIconSvg', iconSvg2Directive);

    
    function vodSvgDirective() {
        return {
            restrict: 'E',
            replace: 'true',
            template: '<object type="image/svg+xml" data=""></object>',
            link: function(scope, element, attrs) {
    
                var paintSvg = function (svgElem){
                    var paths = [];
                    ['path', 'circle', 'rectangle', 'polygon'].forEach(function(shape){
                        paths.push.apply(paths, svgElem.getElementsByTagName(shape));
                    });
                    for(var i = 0; i < paths.length; i++) {
                        paths[i].style.fill = attrs.color || "#BB2727";
                    }
                };
    
                element.bind('load', function(e) {
                    paintSvg( element[0].getSVGDocument() );
                });
            }
        };
    };

    function iconSvg2Directive()
    {

        var LinkIconDirective = function(scope, element, attrs) {

            var paintSvg = function (svgElem){
                var paths = [];
                ['path', 'circle', 'rectangle', 'polygon'].forEach(function(shape){
                    paths.push.apply(paths, svgElem.getElementsByTagName(shape));
                });
                for(var i = 0; i < paths.length; i++) {
                    paths[i].style.fill = attrs.fill || "#BB2727";
                }
            };

            var styles = [
                "width : " + attrs.width || '32px',
                "height : " + attrs.height || '32px',
            ];

            element.attr('data', attrs.path);
            element.attr('style', styles.join(';') );

            element.bind('load', function(e) {
                paintSvg( element[0].getSVGDocument() );
            });
        }

        return {
            restrict: 'E',
            replace: 'true',
            template: '<object type="image/svg+xml" data=""></object>',
            link: LinkIconDirective
        }
    }