Che codice usare con le icone Material Design di Google.

Che codice usare per le icone in Material Design di Google per utilizzarle nelle nostre pagine web.

Giusto ieri ho elencato una serie di siti in cui ottenere delle icone Material Design cioè che utilizzano un linguaggio introdotto da Google particolarmente adatto ai dispositivi mobili senza però dimenticare i grandi schermi dei computer visto che sono realizzate con la grafica vettoriale e quindi che mantengono la loro qualità quando vengono aumentate le dimensioni.

La grafica cosiddetta raster utilizza invece una griglia di pixel che quando si aumentano le dimensioni, della immagine provoca un fastidioso effetto sgranatura. In questo post vedremo nello specifico come si possano utilizzare le icone di Google anche per i nostri template o per essere pubblicate nei post. Ricordo che le icone di Google Material Design  possono essere scaricate tutte insieme in un file in formato ZIP andando appunto su Download ZIP.

 

Se siete utenti di GitHub potete clonare tutto il sito con l'applicazione GutHub Desktop. I termini di licenza di queste icone sono molto permissivi visto che sono offerte con Licenza Creative Commons 4.0 con possibilità di copiarle, modificarle trasformarle per scopi anche commerciali.

UTILIZZO DELLE ICONE MATERIAL DESIGN COME IMMAGINI

Il sistema più semplice di usare queste icone è di trattarle come semplici immagini visto che per ciascuna di esse c'è un file in formato PNG che la rappresenta.

Ciascuna icona può essere caricata sul nostro account Picasa per poi ottenerne il link diretto. Tale immagini possono poi essere pubblicate in una pagina web con il classico codice

<img src='LINK_DIRETTO_ICONA' title='titolo icona' alt='nome icona'/>

PUBBLICARE LE ICONE COME FOSSERO GOOGLE FONTS

Ricordo che Google ha messo a disposizione degli utenti il sito Google Fonts che può essere usato per mostrare i nostri siti con le centinaia di famiglie di caratteri disponibili. Le icone Material Design di Google sono infatti caricate nel web proprio su Google Fonts.  Con questa riga di codice

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

possiamo poi richiamare una icona specifica. Facciamo un esempio pratico per rendere le cose più semplici. Se tra le icone di Google ne vediamo una che vorremmo utilizzare invece di caricarla su Picasa possiamo semplicemente appuntarne il nome in un file di testo

Quella evidenziata nello screenshot precedente ha come ID ic_cake_black_48dp. Quindi se noi apriamo  un Editor HTML online e incolliamo questo codice

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"><i class="material-icons">ic_cake_black_48dp</i>

visualizzeremo come risultato proprio la icona in oggetto



Con questo sistema si può quindi andare su Modello > Modifica HTML e incollare sopra al tag  </head> la riga di codice evidenziata di giallo. Qualora nel modello o in un post volessimo inserire una icona Material Design basterebbe incollare una semplice riga con il suo nome in questo modo

<i class="material-icons">nome-icona</i>

COLORARE LE ICONE MATERIAL DESIGN

Le icone Material Design come vedremo in un prossimo post non sono delle immagini come siamo abituati a conoscerle ma possono essere assimilate a un file .XML e infatti possono anche essere utilizzate in formato SVG che non è altro che un codice. Quindi il colore non è una informazione presente nella icona e può essere personalizzato a piacere. Se per esempio incolliamo questo codice

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"><style>
.material-icons {
font-size: 48px;
color: rgba(255, 0, 0, 0.54);
}
</style>
<i class="material-icons">face</i>

otterremo l'icona della faccia con un colore rosso, dimensioni 48 pixel e con opacità del 54%. I codici dei colori oltre che RGBA possono anche essere in formato HEX.



Già da questi primi esempi si capisce il grande interesse per queste icone soprattutto da parte degli sviluppatori per dispositivi mobili.

MODIFICARE COLORE E DIMENSIONI ICONE

Le icone Material Design essendo in Grafica Vettoriale non perdono di qualità aumentandone le dimensioni. Come ultimo esempio vediamo questo codice

<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
      rel="stylesheet"><style>
.material-icons {
  color:#00F;
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 120px; 
  display: inline-block;
  width: 1em;
  height: 1em;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  /* 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';
}
</style>
<i class="material-icons">ic_public_black_24dp</i>

con una icona denominata ic_public_black_24dp che produce questo risultato



con l'icona colorata di blu e con dimensioni di 120 pixel. Chi volesse saperne di più su questo tema può consultare Material Icons su GitHub  e Material Icons su Google.