Il Material Design di Google ha apportato un drastico cambiamento ai propri servizi con colori meravigliosamente contrastati e animazioni interattive. Con l'alternanza, sono arrivate icone realizzate per adattarsi al resto dell'ecosistema. Google ha reso disponibili gratuitamente tutte le icone sui propri siti web, qui ti spieghiamo come scaricarle e utilizzarle.
Scarica icone di progettazione materiale gratuite
Per scaricare le icone a tema Materiale, vai al repository di Google. Scorri verso il basso e scoprirai tantissime icone disponibili per l'uso. Puoi cercare utilizzando la barra degli strumenti o selezionare quella che ti serve scorrendo effettivamente, il che ovviamente consumerà molto del tuo tempo. Una volta fatto, apparirà una barra orizzontale nella parte inferiore contenente il nome dell'icona e un paio di opzioni che puoi regolare.
Suggerimento: se devi scaricare tutte le icone dei materiali, vai a questo link.
Puoi specificare la dimensione, se vuoi un'icona nera o bianca e, infine, puoi scaricarli in formato SVG o PNG. Sfortunatamente, sono disponibili solo due varianti di colore. Tuttavia, puoi utilizzare l'editor SVG per personalizzare un'icona SVG e modificare le sfumature per lo stesso.
Cambia il colore delle icone progettate per il materiale utilizzando l'editor SVG
Per modificare il colore dell'icona nell'editor SVG, fai clic sull'icona del secchio in basso e seleziona il colore desiderato. Tocca l'immagine dell'icona dopo averla importata dal menu a discesa di modifica SVG nell'angolo in alto a sinistra. Una volta terminato, esportalo dallo stesso menu a discesa che abbiamo visto prima. Se devi modificare le icone in locale, puoi scaricare SVG tramite questo link.
Google ha pubblicato una guida approfondita per l'utilizzo di queste icone sulla propria pagina Github. Include anche dettagli sulla licenza, frammenti di codice iOS/Android per iniziare e un paio di metodi per implementare icone di materiale sul tuo sito Web con esempi.
Questo era tutto. Facci sapere se abbiamo perso qualcosa nella sezione commenti in basso.