我通过CDN提供一个Web小部件，我正在使用角度材料 . 我想为svg图标设置“md-svg-src”属性以使用我的CDN中的基本目录 .

我试图使用自定义指令，但角度材料不会编译svg图标（虽然它确实设置了“md-svg-src”属性） .

我也希望尽可能高效地完成它，如果没有必要，不要进行角度重新编译 .

到目前为止这是我的代码：

<!-- md-icon with a relative url -->
    <md-icon my-svg-src="addShoppingCart"
             aria-label="Insert Drive Icon">
    </md-icon>

指令定义：

app.directive("mySvgSrc", function ($compile) {

            return {
                compile: function (tElement, attrs) {

                    var baseUrl = "http://localhost/mySrc/New Folder/";
                    attrs.$set("md-svg-src", baseUrl + attrs.mySvgSrc + ".svg");

                }
            }
        })

注意：由于cors问题，您不能将角度材料svg url与其cdn一起使用 . 您可以从以下位置下载示例：https://material.angularjs.org/latest/img/icons/cake.svg

谢谢您的帮助 .

这是完整的代码（你只需要在本地保存一个svg文件，请参阅我的注释）;

<!DOCTYPE html>
<html ng-app="main">
<head>

    <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.css">


</head>
<body>

    <!-- md-icon with a relative url -->
    <md-icon my-svg-src="addShoppingCart"
             aria-label="Insert Drive Icon">
    </md-icon>


    <!-- Angular Material Dependencies -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.min.js"></script>

    <!-- Angular Material Javascript now available via Google CDN; version 0.10 used here -->
    <script src="https://ajax.googleapis.com/ajax/libs/angular_material/0.10.0/angular-material.min.js"></script>

    <script>
        var app = angular.module("main", ["ngMaterial"]);

        app.directive("mySvgSrc", function ($compile) {

            return {
                compile: function (tElement, attrs) {

                    var baseUrl = "http://localhost/mySrc/New Folder/";
                    attrs.$set("md-svg-src", baseUrl + attrs.mySvgSrc + ".svg");

                }
            }
        })
    </script>

</body>
</html>
angularjs angular-material