SVG 'use' tag in Chrome broken

Question

There is SAP (AngularJS and Angular Route) with icon-based navigation made by svg-sprite. So, I hava inline code like this:

Answer 1

This is caused by a combination of AngularJS' dependency of and UI routing, when the application is not at its "root" state, the relative hash link in the element would not correctly resolve.

To get around this, you would need to resolve the xlink:href to use absolute path. You may do the following:

angular-icon-template.html

angular-icon.js

angular.module('angularIcon', [])
    .directive('angularIcon', {
        templateUrl: 'angular-icon-template.html',
        scope: { iconName: '@' },
        controller: function($scope) {
            $scope.baseUrl = window.location.href.replace(window.location.hash, '');
        }
    });