How to use md-icon in Angular Material

Question

I was wondering how to use Material s icons  as this is not working     lt material-icon icon     img icons ic access time 24px svg  gt   lt  material-icon gt     I guess there is a problem with the path given as parameter to the the icon attribute  I would like to know where this icon folder actually is

User · Answer

By Using like
use css and font same location

@font-face {
    font-family: 'Material-Design-Icons';
    src: url('Material-Design-Icons.eot');
    src: url('Material-Design-Icons.eot?#iefix') format('embedded-opentype'),
         url('Material-Design-Icons.woff2') format('woff2'),
         url('Material-Design-Icons.woff') format('woff'),
         url('Material-Design-Icons.ttf') format('truetype'),
         url('Material-Design-Icons.svg#ge_dinar_oneregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

User · Answer

lt md-button class  md-fab md-primary  md-theme  cyan  aria-label  Profile  gt       lt md-icon icon   img icons ic people 24px svg  style  width  24px  height  24px   gt  lt  md-icon gt   lt  md-button gt    source  https   material angularjs org   demo material components button

User · Answer

md-icons aren t in the bower release of angular-material yet  I ve been using Polymer s icons  they ll probably be the same anyway   bower install polymer core-icons

User · Answer

All md- prefixes are now mat- prefixes as of time of writing this   Put this in your html head    lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt    Import in our module   import   MatIconModule   from   angular material     Use in your code    lt mat-icon gt face lt  mat-icon gt    Here is the latest documentation   https   material angular io components icon overview

User · Answer

Easy way  use the following CDN     lt script src    cdnjs cloudflare com ajax libs angular-material-icons 0 5 0 angular-material-icons min js  gt  lt  script gt     Inject ngMdIcons to your angularjs application    angular module  demoapp     ngMdIcons       Use ng-md-icon directive in your html  specifying fill-color through css     lt ng-md-icon icon       style  fill       size       gt  lt  ng-md-icon gt     Source  https   klarsys github io angular-material-icons

User · Answer

In their latest release there s a directive called md-icon   lt md-icon icon  img icons ic refresh 24px svg  gt  lt  md-icon gt

User · Answer

It actually works now from bower   bower install material-design-icons --save   It downloads 37 1 KBs  Then it extracts and installs  You will see a folder called material-design-icons in bower components folder  The total size is around 299KBs

User · Answer

As the other answers didn t address my concern I decided to write my own answer    The path given in the icon attribute of the md-icon directive is the URL of a  png or  svg file lying somewhere in your static file directory  So you have to put the right path of that file in the icon attribute  p s put the file in the right directory so that your server could serve it   Remember md-icon is not like bootstrap icons  Currently they are merely a directive that shows a  svg file    Update  Angular material design has changed a lot since this question was posted   Now there are several ways to use md-icon  The first way is to use SVG icons    lt md-icon md-svg-src     lt url of an image file gt   gt  lt  md-icon gt   Example    lt md-icon md-svg-src     static img android svg  gt  lt  md-icon gt   or    lt md-icon md-svg-src       getMyIcon       gt  lt  md-icon gt    where getMyIcon is a method defined in  scope   or  lt md-icon md-svg-icon  social android  gt  lt  md-icon gt   to use this you have to the  mdIconProvider service to configure your application with svg iconsets   angular module  appSvgIconSets     ngMaterial         controller  DemoCtrl   function  scope           config function  mdIconProvider         mdIconProvider        iconSet  social    img icons sets social-icons svg   24         defaultIconSet  img icons sets core-icons svg   24               The second way is to use font icons    lt md-icon md-font-icon  android  alt  android  gt  lt  md-icon gt    lt md-icon md-font-icon  fa-magic  class  fa  alt  magic wand  gt  lt  md-icon gt   prior to doing this you have to load the font library like this     lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt   or use font icons with ligatures    lt md-icon md-font-library  material-icons  gt face lt  md-icon gt    lt md-icon md-font-library  material-icons  gt  xE87C  lt  md-icon gt    lt md-icon md-font-library  material-icons  class  md-light md-48  gt face lt  md-icon gt   For further details check our  Angular Material mdIcon Directive documentation   mdIcon Service Documentation   mdIconProvider Service Documentation

User · Answer

The simplest way today would be to simply request the Material Icons font from Google Fonts  for example in your HTML header tag    lt link href  https   fonts googleapis com icon family Material Icons  rel  stylesheet  gt    or in your stylesheet    import url https   fonts googleapis com icon family Material Icons     and then use as font icon with ligatures as explained in the md-icon directive  For example    lt md-icon aria-label  Menu  class  material-icons  gt menu lt  md-icon gt    The complete list of icons ligatures is at https   www google com design icons

[angularjs] How to use <md-icon> in Angular Material?

Examples related to angularjs

Examples related to material-design

Examples related to angularjs-material