javascript - 如何在我的 Angular Material 应用程序中加载 svg 图标

标签 javascript angularjs svg angular-material

我正在尝试向我的 Angular Material 应用程序添加一个图标。根据我对文档的理解,我使用了 $mdIconProvider ,如下所示:

app.config(function($stateProvider, $urlRouterProvider, $mdIconProvider) {
    $urlRouterProvider.otherwise('/login');
    $stateProvider
        .state('login', {
            url: '/login',
            views: {
                '@': {
                    controller: 'LoginCtrl',
                    templateUrl: 'app/components/login/login.html'
                }
            }
        });
    $mdIconProvider
        .iconSet('account', 'resources/icons/ic_account_circle_48px.svg', 48);
});

我已使用 ng-templates grunt 模块将此图标加载到我的 $templateCache 中。

下面是我的模板代码:

<md-button aria-label="Open phone interactions menu" class="md-icon-button">
                    <md-icon md-menu-origin  md-svg-icon="account"></md-icon>
</md-button>

图标未在我的浏览器控制台中显示并低于警告。

enter image description here

请以正确的方式指导我,因为我是有 Angular 和有 Angular Material 设计的新手。

最佳答案

素材图标中没有名为“账户”的图标,查看列表here

 <md-list-item class="md-3-line">
              <md-icon md-svg-icon="ic_place_48px.svg"></md-icon>
              <div class="md-list-item-text">
                <h3>blueberries</h3>
                <p>content1</p>
                <p>content2</p>
              </div>
</md-list-item>

<强> DEMO

关于javascript - 如何在我的 Angular Material 应用程序中加载 svg 图标,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40415553/

相关文章:

javascript - 动态点击不工作

angularjs - "Same Domain"上的 Angular 选项 http 预检?

javascript - Angularjs 需要在 ng-change 之前更新 ng-model

javascript - Typeor find with and & or where block

javascript - 单元测试中卡住的 promise

javascript - 从变量中的 .txt 文件获取文本

javascript - 使用 ng-click 在 angularJs 中添加和删除类

html - 列数属性的 Svg 显示问题

html - 如何在 IE(和其他浏览器)中保留内联 SVG 的纵横比?

svg - 在单击事件中访问 D3 SVG 对象