I'm currently attempting to incorporate a single icon into my Angular Material application. Following the documentation, I have implemented $mdIconProvider in the following manner:
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);
});
To cache this icon, I utilized the $templateCache in conjunction with the ng-templates grunt module.
Below is the snippet from my template code:
<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>
The issue I am facing is that the icon is not displaying and I am receiving a warning in the browser console:
https://i.stack.imgur.com/2vPoe.png
Any guidance on the correct approach would be greatly appreciated as I am relatively new to Angular and Angular Material design.