我正在尝试构建一组自定义SVG图标，用于Angluar Material 1.x，如下所述：https://material.angularjs.org/latest/api/directive/mdIcon

我使用以下方法正确设置了.config：

$mdIconProvider
       .iconSet('social', 'App8/images/svg/social-circle.svg', 24);

在我的social-circle.svg文件中使用以下内容

<svg>
<defs>
<g id="cake"><path d="M12 6c1.11 0 2-.9 2-2 0-.38-.1-.73-.29-1.03L12 0l-1.71 2.97c-.19.3-.29.65-.29 1.03 0 1.1.9 2 2 2zm4.6 9.99l-1.07-1.07-1.08 1.07c-1.3 1.3-3.58 1.31-4.89 0l-1.07-1.07-1.09 1.07C6.75 16.64 5.88 17 4.96 17c-.73 0-1.4-.23-1.96-.61V21c0 .55.45 1 1 1h16c.55 0 1-.45 1-1v-4.61c-.56.38-1.23.61-1.96.61-.92 0-1.79-.36-2.44-1.01zM18 9h-5V7h-2v2H6c-1.66 0-3 1.34-3 3v1.54c0 1.08.88 1.96 1.96 1.96.52 0 1.02-.2 1.38-.57l2.14-2.13 2.13 2.13c.74.74 2.03.74 2.77 0l2.14-2.13 2.13 2.13c.37.37.86.57 1.38.57 1.08 0 1.96-.88 1.96-1.96V12C21 10.34 19.66 9 18 9z"/></g>
</defs>
</svg>

和...

<md-icon md-svg-icon="social:cake" aria-label="android "></md-icon>

按预期显示图标 . 但是，当我尝试放置我的实际SVG图标文本（从adobe illustrator生成）时，事情不起作用 . 下面是我的社交图标SVG代码：显然它更复杂并且包含为社交图标提供默认颜色的样式...这对于角度材料来说太复杂了吗？

<svg>
<style type="text/css">
    .fb{fill:#415993;} /*facebook*/
    .insta{fill:#C231A2;} /*instagram*/
    .white{fill:#FFFFFF;}
</style>
<defs>
<g id="fb">
    <path class="fb" d="M250.5,497.1L250.5,497.1c-136.4,0-247-110.6-247-247l0,0c0-136.4,110.6-247,247-247l0,0
        c136.4,0,247,110.6,247,247l0,0C497.6,386.5,387,497.1,250.5,497.1z"/>
    <g>
        <path class="white" d="M327.7,95.6l-40.1-0.1c-45,0-74.1,29.8-74.1,76v35.1h-40.3c-3.5,0-6.3,2.8-6.3,6.3v50.8
            c0,3.5,2.8,6.3,6.3,6.3h40.3v128.2c0,3.5,2.8,6.3,6.3,6.3h52.6c3.5,0,6.3-2.8,6.3-6.3V270h47.1c3.5,0,6.3-2.8,6.3-6.3v-50.8
            c0-1.7-0.7-3.3-1.8-4.5s-2.8-1.8-4.5-1.8h-47.1v-29.7c0-14.3,3.4-21.5,22-21.5h27c3.5,0,6.3-2.8,6.3-6.3v-47.2
            C334,98.4,331.2,95.6,327.7,95.6z"/>
    </g>
</g>
<g id="instagram">
    <path class="insta" d="M250.1,496.1L250.1,496.1c-135.9,0-246-110.2-246-246l0,0c0-135.9,110.2-246,246-246l0,0
        c135.9,0,246,110.2,246,246l0,0C496.1,385.9,386,496.1,250.1,496.1z"/>
    <g>
        <path class="white" d="M154.6,121.5h191.1c18.1,0,33,13.4,33,33v191.1c0,19.6-14.8,33-33,33H154.6c-18.2,0-33-13.4-33-33V154.5
            C121.6,134.9,136.4,121.5,154.6,121.5L154.6,121.5z M308.8,150c-6.4,0-11.6,5.2-11.6,11.6v27.7c0,6.4,5.2,11.6,11.6,11.6h29.1
            c6.4,0,11.6-5.2,11.6-11.6v-27.7c0-6.4-5.2-11.6-11.6-11.6H308.8L308.8,150z M349.6,230.2H327c2.1,7,3.3,14.4,3.3,22.1
            c0,42.8-35.8,77.4-79.9,77.4s-79.9-34.7-79.9-77.4c0-7.7,1.2-15.1,3.3-22.1h-23.6v108.6c0,5.6,4.6,10.2,10.2,10.2h179
            c5.6,0,10.2-4.6,10.2-10.2V230.2L349.6,230.2z M250.3,199.4c-28.5,0-51.6,22.4-51.6,50s23.1,50,51.6,50s51.6-22.4,51.6-50
            C302,221.8,278.9,199.4,250.3,199.4z"/>
    </g>
</g>
</defs>
</svg>

最后，这是从Illustrator导出的原始SVG ..

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 22.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<style type="text/css">
    .st0{fill:#415993;}
    .st1{fill:#FFFFFF;}
</style>
<g id="fb">
    <path class="st0" d="M250.5,497.1L250.5,497.1c-136.4,0-247-110.6-247-247l0,0c0-136.4,110.6-247,247-247l0,0
        c136.4,0,247,110.6,247,247l0,0C497.6,386.5,387,497.1,250.5,497.1z"/>
    <g>
        <path class="st1" d="M327.7,95.6l-40.1-0.1c-45,0-74.1,29.8-74.1,76v35.1h-40.3c-3.5,0-6.3,2.8-6.3,6.3v50.8
            c0,3.5,2.8,6.3,6.3,6.3h40.3v128.2c0,3.5,2.8,6.3,6.3,6.3h52.6c3.5,0,6.3-2.8,6.3-6.3V270h47.1c3.5,0,6.3-2.8,6.3-6.3v-50.8
            c0-1.7-0.7-3.3-1.8-4.5s-2.8-1.8-4.5-1.8h-47.1v-29.7c0-14.3,3.4-21.5,22-21.5h27c3.5,0,6.3-2.8,6.3-6.3v-47.2
            C334,98.4,331.2,95.6,327.7,95.6z"/>
    </g>
</g>
</svg>

此文件完美呈现使用：

<md-icon md-svg-icon="App8/images/svg/facebook-circle.svg" ></md-icon>

任何想法或仅仅是太复杂而无法用作图标库？

svg icons angular-material