There are several ways to display icons in angular material application. It's described in the angular material documentation. However my team had problems with making work the svg-based mdIcon directive so we had to investigate what are the other solutions people use.
1) Use icon Font
The simplest way. You need to include link to the font css in <head> tag of your application:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
2) Use custom directive
Used in this nice Codepen demo: http://codepen.io/kyleledbetter/pen/gbQOaV
File http://cdn.jsdelivr.net/angular-material-icons/0.4.0/angular-material-icons.min.js injects a list of icons and a directive. As a result you get ngMdIcons directive and icons can be included with following syntax in your templates: <ng-md-icon icon="search"></ng-md-icon>
You can customise the amount of icons that you're loading by editing the list in the file.
3) Use template cache
File http://ngmaterial.assets.s3.amazonaws.com/svg-assets-cache.js injects map of named SVG paths and puts it into Angular $templateCache.
Usage in the template:
<md-icon md-svg-icon="alarm" style="color: #0F0;" aria-label="Alarm Icon"></md-icon>
You can customise the amount of icons that you're loading by editing the list in the file.
No comments:
Post a Comment