Material icons

Angular Material works out of the box with Material Design icons, which can be imported into your app as a web font in your index.html. It is possible to self-host the font; however, if you go down that path, you also don't get the benefit of the user's browser having already cached the font when they visited another website, saving the speed and latency of downloading a 42-56 KB file in the process. The complete list of icons can be found at https://material.io/icons/.

Now let's update the toolbar with some icons and setup the home page with a minimal template for a fake login button:

  1. Ensure Material icons <link> tag has been added to index.html:
src/index.html<head>  ... <link href="https://fonts.googleapis.com/icon?family=Material+Icons" ...

Get Angular 6 for Enterprise-Ready Web Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.