Utilizar iconos para la web

Método 1. Via Google Web Fonts

La forma más fácil de configurar fuentes de iconos para usar en cualquier página web es a través de Google Web Fonts. Todo lo que necesita hacer es incluir una sola línea de HTML:

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

Similar to other Google Web Fonts, the correct CSS will be served to activate the 'Material Icons' font specific to the browser. An additional CSS class will be declared called .material-icons. Any element that uses this class will have the correct CSS to render these icons from the web font.

Método 2. Self hosting

Para aquellos que buscan alojar la fuente web, es necesaria una configuración adicional. Aloje la fuente del icono en una ubicación, por ejemplo https://example.com/material-icons.woff y agregue la siguiente regla CSS:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://example.com/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
    local('MaterialIcons-Regular'),
    url(https://example.com/MaterialIcons-Regular.woff2) format('woff2'),
    url(https://example.com/MaterialIcons-Regular.woff) format('woff'),
    url(https://example.com/MaterialIcons-Regular.ttf) format('truetype');
}

In addition, the CSS rules for rendering the icon will need to be declared to render the font properly. These rules are normally served as part of the Google Web Font stylesheet, but will need to be included manually in your projects when self-hosting the font:

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

O puedes utilizar esta guía para integrarlos.

Image Added

Instalación iconos

Repositorio Git

Los iconos de material están disponibles en el repositorio de git que contiene el conjunto completo de iconos, incluidos todos los diversos formatos que ponemos a disposición.

$ git clone http://github.com/google/material-design-icons/

Instalación desde bower

Instale los iconos usando Bower package manager.

$ bower install material-design-icons

Instalación npm

Instale los iconos usando npm package manager.

$ npm install material-design-icons

Ilustraciones

Cada software tiene un set de ilustraciones creadas con el color primario específico del proyecto, para crear nuevas ilustraciones utilizamos una herramienta open source llamada Undraw.

Para crear nuevas ilustraciones ir a https://undraw.co/illustrations, seleccionar el color primario del proyecto y seleccionar las imágenes necesarias.