Using Material Design Icons (CDN Option)

To use Material Design icons as fonts, include the following style sheet in your project/page.

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

Use md-icondirective. Consider the following code. It uses the material-icons font set. The attribute md-font-setwith a value material-iconsspecifies the same. Outside Angular Material, if you noticed HTML elements using font-set, it needs a special code mapped to each icon. However, with the md-icon directive we use a friendly name to select an icon (among many icons available in the font file).

<md-icon md-font-set="material-icons" style="font-size:42px" >face</md-icon>                                                                                                    

Using Material Design Icons (with Files on Your Server )

As you might have also noticed, we are using CDN locations for style sheets and fonts. The preceding link element downloads the CSS, which in turn requests for font files.

If you prefer to render styles and fonts from your infrastructure rather than from the CDN, add the following styles to your project. This is copied from the previously mentioned material icons’ link element, https://fonts.googleapis.com/icon?family=Material+Icons .

Create a style sheet with the following styles.

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(your-url/your-font.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

Notice the highlighted URL for font location. Preferably, use bower or npm to download Angular Material icons. Copy the WOFF2 file from the downloaded packages. The following is a bower install command for downloading the package.

bower install material-design-icons

Using Custom Icons

As specified earlier, for Material Design icons, we get the friendly name for an icon out of the box. If we need to use custom icons, copy your font files in a folder. Use a style sheet with class names for each icon. The following is a sample.

.icon-home:before {
    content: "e900";
}

Use Angular Material element/directive md-icon and reference the CSS class as a value for md-font-icon.

<md-icon md-font-icon="icon-home" style="font-size:42px" ></md-icon>

Angular Material Icon Sets

We could also use icon sets to preload SVGs up front. We could load an icon set as a default icon set. That means we could reference the SVG icons by name anywhere in the HTML templates.

Consider the following code.

 angular.module("sampleApp", ["ngMaterial", "material.svgAssetsCache"])              
     .config(function($mdIconProvider){
        $mdIconProvider.defaultIconSet('img/icons/sets/core-icons.svg', 24);              
     });

In the sample, we are using icon sets pre-created and available on CDN. The CDN location used in the sample is https://​s3-us-west-2.​amazonaws.​com/​s.​cdpn.​io/​t-114/​svg-assets-cache.​js. All the icons in the sample are packaged in AngularJS module material.svgAssetsCache. As we create the sample module, add this module as a dependency. (material.svgAssetsCache: review the preceding highlighted code).

In the config function which runs as we bootstrap the module, inject $mdIconProvider. Using an API defaultIconSet(), we could set a default iconset. In the sample, we are considering core-icons.svg as the default icon sets. This icon set is available in svg-assets-cache.js.

Notice the second parameter, 24. It is the default view box size, in pixels for the given icon set. A bigger number shows a bigger icon by default.

Use md-icon element/directive and md-svg-icon attribute to use an icon out of the default icon set.

<md-icon md-svg-icon="account-balance" style="width:48px; height:48px; color:red" ></md-icon>

Similar to earlier examples, we are keeping style attributes as is, except that the way SVG file loads has changed. Instead of referencing the SVG file directly, we are using a friendly name referenced in the icon set. See Figure 10-2.

Figure 10-2. Account balance icon with styling applied

Additional Icon Sets

We could preload additional icon sets as well. Consider the following code .

angular.module("sampleApp", ["ngMaterial", "material.svgAssetsCache"])
 .config(function($mdIconProvider){
    $mdIconProvider
     .defaultIconSet('img/icons/sets/core-icons.svg', 24)
     .iconSet('communication','img/icons/sets/communication-icons.svg',24);                

});

Here we used an API iconSet. It has an additional first parameter to name the icon set. In the sample, we are naming it communication. Consider the following HTML template.

<md-icon md-svg-icon="account-balance" style="width:48px; height:48px; color:red" ></md-icon>        
<md-icon md-svg-icon="communication:business" style="width:48px; height:48px; color:red" ></md-icon>                  

Notice iconsetName:icon-name syntax (md-svg-icon=“communication:business”). As we are not loading the icon from default icon set, we identify the icon set that has the given icon named business. See Figure 10-3 for a page rendered using this approach.

Figure 10-3. Icon set sample

There is an alternative syntax to show an icon in the icon set. Consider the following.

<md-icon md-icon-set="communication" >business</md-icon>

Specify the icon id as the value for md-icon element/directive. The icon set is provided through an attribute md-icon-set.