Guida alle icone dei materiali

Una panoramica delle icone dei materiali, dove trovarle e come integrarle con i tuoi progetti.

Che cosa sono le icone materiali?

Le icone del sistema di material design sono semplici, moderne, amichevoli e a volte stravaganti. Ogni icona viene creata in base alle nostre linee guida per la progettazione in modo da rappresentare con forme semplici e minime i concetti universalmente utilizzati in un'interfaccia utente. Per garantire leggibilità e chiarezza a prescindere dalle dimensioni delle varie dimensioni, queste icone sono state ottimizzate per una visualizzazione ottimale su tutte le piattaforme e con le risoluzioni più comuni.

Vedi il set completo di icone di material design nella raccolta di icone di material design.

raccolta di icone

Recupero icone in corso...

Le icone sono disponibili in diversi formati e sono adatte a diversi tipi di progetti e piattaforme, per gli sviluppatori nelle loro app e per i designer nei prototipi o nei prototipi.

Licenze

Abbiamo reso disponibili queste icone per consentirti di incorporarle nei tuoi prodotti ai sensi della licenza Apache versione 2.0. Non esitare a remixare e condividere nuovamente queste icone e documentazione nei tuoi prodotti. L'attribuzione nella schermata about dell'app potrebbe essere utile se non è obbligatoria.

Navigazione e download di singole icone

Il set completo di icone dei materiali è disponibile nella raccolta delle icone dei materiali. Le icone sono disponibili per il download in formato SVG o PNG, in formati adatti per progetti web, Android e iOS o per l'inclusione in strumenti di design.

Download di tutti gli elementi in corso...

Procurati l'archivio ZIP stabile più recente (circa 310 MB) di tutte le icone o la versione all'avanguardia dal master.

Repository Git

Le icone del materiale sono disponibili nel repository git che contiene il set completo di icone, inclusi tutti i vari formati che stiamo rendendo disponibili.

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

Carattere icona per il web

Il carattere dell'icona materiale è il modo più semplice per incorporare icone materiali nei progetti web. Abbiamo raggruppato tutte le icone dei materiali in un unico carattere che sfrutta le capacità di rendering tipografico dei browser moderni per consentire agli sviluppatori web di incorporare facilmente queste icone con poche righe di codice.

L'utilizzo del carattere non è solo il metodo più pratico, ma è efficiente e ha un aspetto fantastico:

  • Oltre 900 icone, il tutto in un unico file di piccole dimensioni.
  • Pubblicati dai server di Google Web Fonts oppure possono essere ospitati autonomamente.
  • Supportata da tutti i browser web moderni.
  • Colorate, ridimensionate e posizionate interamente con CSS.
  • Basato su vettori: ha un aspetto perfetto su qualsiasi scala, con display retina e schermi a bassa dpi.

Il carattere dell'icona pesa solo 42 KB nel suo formato woff2 più piccolo e 56 KB nel formato woff standard. In confronto, i file SVG compressi con gzip hanno in genere una dimensione di circa 62 kB, ma ciò può essere ridotto notevolmente compilando solo le icone necessarie in un singolo file SVG contenente sprite di simboli.

Metodo di configurazione 1. Utilizzo tramite Google Fonts

Il modo più semplice per impostare i caratteri delle icone da utilizzare in qualsiasi pagina web è tramite Google Fonts. Tutto quello che devi fare è includere una singola riga di codice HTML:

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

Come per gli altri caratteri web di Google, viene pubblicato il codice CSS corretto per attivare il carattere "Material Icons" specifico per il browser. Verrà dichiarata un'ulteriore classe CSS denominata .material-icons. Tutti gli elementi che utilizzano questa classe disporranno del codice CSS corretto per eseguire il rendering di queste icone dal carattere web.

Metodo di configurazione 2. Hosting autonomo

Per chi desidera ospitare autonomamente il carattere web è necessaria una configurazione aggiuntiva. Ospita il font dell'icona in una posizione, ad esempio https://example.com/material-icons.woff, e aggiungi la seguente regola 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');
}

Inoltre, le regole CSS per il rendering dell'icona dovranno essere dichiarate in modo che il carattere venga visualizzato correttamente. Queste regole vengono generalmente pubblicate come parte del foglio di stile Google Web Font, ma dovranno essere incluse manualmente nei progetti quando il carattere è ospitato in self-service:

.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';
}

Utilizzo delle icone in HTML

È facile incorporare icone nella tua pagina web. Ecco un piccolo esempio:

un volto

<span class="material-icons">face</span>

In questo esempio viene utilizzata una funzionalità tipografica chiamata legature, che consente di visualizzare il glifo di un'icona semplicemente utilizzando il suo nome testuale. La sostituzione viene eseguita automaticamente dal browser web e fornisce un codice più leggibile rispetto al riferimento al carattere numerico equivalente.

Questa funzionalità è supportata nella maggior parte dei browser moderni, sia su computer che su dispositivi mobili.

Browser Versione che supporta le legature
Google Chrome 11
Mozilla Firefox 3.5
Apple Safari 5
Microsoft IE 10
Microsoft Edge 18
Opera 15
Apple MobileSafari iOS 4.2
Browser Android 3.0

Per i browser che non supportano le legature, utilizza i riferimenti a caratteri numerici per specificare le icone, come nell'esempio seguente:

Normale
<span class="material-icons">&#xE87C;</span>

Trova sia i nomi delle icone sia i punti di codice nella raccolta delle icone dei materiali selezionando una qualsiasi icona e aprendo il relativo riquadro. Il carattere di ogni icona ha un indice dei punti di codice nel nostro repository Git che mostra l'insieme completo di nomi e codici carattere (qui).

Stili delle icone in material design

Queste icone sono state progettate per rispettare le linee guida per la progettazione dei materiali e avere un aspetto ottimale quando vengono utilizzate le dimensioni e i colori consigliati per le icone. Gli stili riportati di seguito consentono di applicare facilmente le taglie, i colori e gli stati delle attività che consigliamo.

/* Rules for sizing the icon. */
.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

/* Rules for using icons as black on a light background. */
.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

/* Rules for using icons as white on a dark background. */
.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Taglie

Sebbene le icone nel carattere possano essere ridimensionate a qualsiasi dimensione, in conformità con le linee guida sulle icone di material design, consigliamo di visualizzarle in formato 18, 24, 36 o 48 px. Il valore predefinito è 24 px.

Regole CSS per le linee guida standard per il dimensionamento dei materiali:

.material-icons.md-18 { font-size: 18px; }
.material-icons.md-24 { font-size: 24px; }
.material-icons.md-36 { font-size: 36px; }
.material-icons.md-48 { font-size: 48px; }

Le icone dei materiali hanno un aspetto migliore a 24 px, ma se un'icona deve essere visualizzata in una dimensione alternativa, puoi utilizzare le regole CSS riportate sopra per:

18px
<span class="material-icons md-18">face</span>
24px
<span class="material-icons md-24">face</span>
36 px
<span class="material-icons md-36">face</span>
48 px
<span class="material-icons md-48">face</span>

Colorare

Il carattere dell'icona consente di applicare facilmente lo stile a un'icona di qualsiasi colore. In conformità alle linee guida per le icone di material design, per le icone attive consigliamo di utilizzare il nero con il 54% di opacità o il bianco con il 100% di opacità quando vengono visualizzate rispettivamente su sfondi chiari o scuri. Se un'icona è disattivata o inattiva, viene utilizzato, rispettivamente, il nero al 26% o il bianco al 30% per gli sfondi chiari e scuri.

Di seguito sono riportati alcuni esempi di utilizzo degli stili CSS materiali descritti in precedenza:

.material-icons.md-dark { color: rgba(0, 0, 0, 0.54); }
.material-icons.md-dark.md-inactive { color: rgba(0, 0, 0, 0.26); }

.material-icons.md-light { color: rgba(255, 255, 255, 1); }
.material-icons.md-light.md-inactive { color: rgba(255, 255, 255, 0.3); }

Esempio per disegnare un'icona su uno sfondo chiaro di colore in primo piano scuro:

Normale
<span class="material-icons md-dark">face</span>
Disabilitata
<span class="material-icons md-dark md-inactive">face</span>

Esempio per disegnare un'icona su uno sfondo scuro con un colore in primo piano chiaro:

Normale
<span class="material-icons md-light">face</span>
Disabilitata
<span class="material-icons md-light md-inactive">face</span>

Per impostare un colore personalizzato per l'icona, definisci una regola CSS che specifichi il colore desiderato per il carattere:

.material-icons.orange600 { color: #FB8C00; }

e utilizzare la classe quando fanno riferimento all'icona:

Normale
<span class="material-icons orange600">face</span>

Immagini delle icone per il web

Le icone in materiale sono disponibili anche come immagini normali, nei formati PNG e SVG.

SVG

Le icone dei materiali vengono fornite come file SVG adatte ai progetti web. Le singole icone sono scaricabili dalla raccolta delle icone dei materiali. I file SVG sono disponibili anche nelle icone di material design repository git sotto il percorso:

material-design-icons/src/

Ad esempio, le icone per le mappe sono in src/maps:

material-design-icons/src/maps/

Se su un sito web sono in uso più icone, è consigliabile creare fogli sprite a partire dalle immagini. Per ulteriori informazioni, consulta la documentazione nella directory sprite del repository git.

PN

PNG è il metodo più tradizionale per visualizzare le icone sul Web. I nostri download dalla libreria delle icone dei materiali forniscono densità singola e doppia per ogni icona. Nel download vengono denominati rispettivamente 1x e 2x. Le icone sono disponibili anche nel repository Git in:

material-design-icons/png/

Se su un sito web sono in uso più icone, è consigliabile creare fogli sprite a partire dalle immagini. Per ulteriori informazioni, consulta i suggerimenti nella directory sprite nel repository Git.

Icone per Android

I file PNG adatti ad Android sono disponibili nella raccolta delle icone dei materiali. Sono disponibili in tutte le densità dello schermo supportate, pertanto dovrebbero essere visualizzate bene su qualsiasi dispositivo.

Le icone sono disponibili anche nel repository git delle icone di material design nella stessa combinazione di colori e dimensioni, denominati come segue:

Il disegno vettoriale è attualmente disponibile solo come icona nera da 24 dp. Ciò è necessario per garantire la compatibilità con le nostre dimensioni di icone più standard. Per visualizzare l'icona in un colore diverso, usa la colorazione disegnabile disponibile su Android Lollipop.

Quando utilizzi Vector Drawable, potrebbe non essere necessario includere il file PNG con densità xxxhdpi poiché è improbabile che un dispositivo che supporti questa densità di schermo non supporti i disegni vettoriali.

Icone per iOS

Le icone in Material Design funzionano bene anche nelle app per iOS. Sia nella libreria delle icone dei materiali sia nel repository git, queste icone sono pacchettizzate in set di immagini Xcode che funzionano facilmente con Xcode Asset Catalogs (xcassets). Questi set di immagini possono essere aggiunti a qualsiasi catalogo di asset Xcode trascinandoli in Xcode nel catalogo degli asset o copiando la cartella nella cartella xcasset.

Set di immagini iOS

Il set di immagini contiene immagini a densità singola, doppia e tripla (1x, 2x, 3x), in modo che funzionino su tutte le densità di schermo iOS note. Vengono fornite entrambe le icone in bianco e nero, ma consigliamo di utilizzare UIImage's imageWithRenderingMode con UIImageRenderingModeAlwaysTemplate che consentirà l'utilizzo dell'immagine come maschera alfa con una colorazione di qualsiasi colore possibile.

Esempio di obiettivo C:

UIButton *button = [[UIButton alloc] init];
UIImage *closeImage =
    [[UIImage imageNamed:@"ic_close"]
       imageWithRenderingMode:UIImageRenderingModeAlwaysTemplate];
button.tintColor = [UIColor colorWithWhite:0 alpha:0.54f];
[button setImage:closeImage forState:UIControlStateNormal];

Esempio di Swift:

let button = UIButton()
let closeImage = UIImage(named:"ic_close")?.imageWithRenderingMode(
    UIImageRenderingMode.AlwaysTemplate)
button.tintColor = UIColor(white:0, alpha:0.54)
button.setImage(closeImage, forState:UIControlState.Normal)

Icone in formato RTL

Lingue come l'arabo e l'ebraico vengono lette da destra a sinistra (RTL). Per le lingue RTL, le UI devono essere speculari per visualizzare la maggior parte degli elementi in questo formato. Quando l'interfaccia utente viene sottoposta a mirroring per RTL, anche alcune icone dovrebbero essere speculari. Quando testo, layout e iconografia si riflettono per supportare le UI da destra a sinistra, tutto ciò che riguarda il tempo deve essere raffigurato come in movimento da destra a sinistra. Ad esempio, in avanti punta a sinistra e indietro a destra. Tuttavia, tieni presente che anche il contesto in cui viene inserita l'icona influisce sulla visualizzazione o meno dell'icona.

Le icone devono essere riflesse solo se la loro direzione corrisponde ad altri elementi dell'interfaccia utente in modalità RTL. Quando un'icona rappresenta caratteristiche visive del tuo sito web diverse in RTL, anche l'icona deve essere speculare in RTL. Ad esempio, se i numeri di un elenco numerato sono sul lato destro nella lingua RTL, i numeri dovrebbero essere sul lato destro dell'icona speculare.

Icone RTL su Android

Questo articolo per sviluppatori Android descrive in dettaglio come implementare le interfacce utente RTL. Per impostazione predefinita su Android, le icone non vengono riflesse quando la direzione del layout viene speculare. Devi eseguire il mirroring specifico delle icone appropriate quando necessario, fornendo risorse specializzate per i linguaggi RTL o utilizzando la funzionalità del framework per eseguire il mirroring degli asset.

Per fornire asset specializzati per le lingue RTL, puoi utilizzare il qualificatore ldrtl nelle directory delle risorse, ad esempio res/drawable-ldrtl/. Le risorse all'interno di queste directory verranno utilizzate solo per le lingue RTL. Per i dispositivi con l'API Android 19 o versioni successive, il framework fornisce anche l'attributo autoMirrored per Drawables. Se questo attributo è impostato su true, il mirroring verrà eseguito automaticamente nelle lingue RTL.

Utilizzo del mirroring automatico:

<vector xmlns:android="http://schemas.android.com/apk/res/android"
        android:width="24dp"
        android:height="24dp"
        android:viewportWidth="24.0"
        android:viewportHeight="24.0"
        android:tint="?attr/colorControlNormal"
        android:autoMirrored="true">
  <path
        android:fillColor="@android:color/white"
        android:pathData="M20,11H7.83l5.59,-5.59L12,4l-8,8 8,
                          8 1.41,-1.41L7.83,13H20v-2z"/>
</vector>

Se non è possibile utilizzare il mirroring automatico o fornire risorse Drawable alternative, l'attributo scaleX di ImageView può essere utilizzato anche per eseguire il mirroring dei disegnabili (ad esempio, fornendo un layout RTL specifico in una directory res/layout-ldrtl).

Mirroring all'interno del file di layout:

<ImageView
    android:id="@+id/my_icon"
    android:layout_width="60dp"
    android:layout_height="60dp"
    android:scaleX="-1" />

Infine, è possibile eseguire il mirroring dei disegni in modo programmatico.

Controlla manualmente la direzione del layout utilizzando getLayoutDirection:

if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
  // custom code
}

Mirroring programmatico dei contenuti di ImageView:

imageView.setScaleX(-1);

Icone RTL su iOS

iOS prevede il concetto di UISemanticContentAttribute collegato a ogni vista. Può essere unspecified, forceLeftToRight, forceRightToLeft, playback o spatial. iOS utilizza questo valore e l'impostazione (da sinistra a destra (LTR)/RTL del dispositivo che presenta l'interfaccia per determinare l'effectiveLayoutDirection della vista. QuestoeffectiveLayoutDirection determina se eseguire il mirroring di un'immagine quando questa viene visualizzata.

Per impostazione predefinita, il contenuto semantico delle immagini è impostato su unspecified. In questo modo vengono visualizzati in modalità RTL. Se non vuoi che un'icona venga mai specchiata, devi impostarla esplicitamente in modo che sia forceLeftToRight. Apple richiama alcune eccezioni che non devono essere riflesse, come la riproduzione di contenuti multimediali (avanzamento veloce, riavvolgimento ecc.), note musicali, immagini che indicano il passare del tempo, ecc.

Esempio di obiettivo C:

// Prevent an icon from being mirrored in RTL mode
UIImage *icon = [UIImage imageNamed:@"my_icon.png"];
UIImageView *iconView = [[UIImageView alloc] initWithImage:icon];
iconView.semanticContentAttribute =
  UISemanticContentAttributeForceLeftToRight;

Esempio di Swift:

// Prevent an icon from being mirrored in RTL mode
let iconImage = UIImage.init(named: "my_icon.png")
let iconView = UIImageView.init(image: iconImage)
iconView.semanticContentAttribute = .forceLeftToRight;

Per una documentazione più approfondita su come implementare RTL su iOS e macOS, consulta la documentazione RTL di Apple.

I contenuti semantici sono stati aggiunti in iOS 9. Se supporti versioni precedenti di iOS, il framework di internazionalizzazione dei materiali esegue il backporting di alcune funzionalità in iOS 8.

Icone RTL sul web

Ti consigliamo il seguente articolo come primer per RTL sul web: https://hacks.mozilla.org/2015/09/building-rtl-aware-web-apps-and-websites-part-1 https://hacks.mozilla.org/2015/10/building-rtl-aware-web-apps-websites-part-2

Per impostazione predefinita sul Web, il mirroring delle icone non viene eseguito quando la direzione del layout viene riflessa. Devi eseguire il mirroring specifico delle icone appropriate quando necessario.

L'esempio seguente mostra come implementare una regola CSS RTL semplice. Puoi anche visualizzarlo sul codepen.

page.html

<html dir="rtl">
  <img class="material-icons" src="my_icon.png" alt="my icon"/>
</html>

page.css

html[dir="rtl"] .icon {
  -moz-transform: scaleX(-1);
  -o-transform: scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
  filter: FlipH;
  -ms-filter: "FlipH";
}

Genera le tue icone RTL utilizzando ImageMagick

Se il mirroring delle icone nel codice non è disponibile, puoi utilizzare ImageMagick per eseguire il mirroring orizzontalmente dell'immagine.

convert -flop my_icon.png my_icon_rtl.png

Quali icone devono essere speculari per il formato RTL?

Di seguito è riportato un elenco di icone di cui è possibile eseguire il mirroring programmatico su RTL:
Freccia indietro di freccia indietro iOS Freccia avanti
freccia avanti iOS freccia a sinistra Freccia destra di
compito Restituzione di compito Backspace
Batteria sconosciuta chiamata effettuata Unione di chiamate
chiamata senza risposta chiamata senza risposta in uscita chiamata ricevuta
Suddivisione chiamata Freccia di espansione a sinistra freccia di espansione a destra
Modalità Chrome Reader dispositivo sconosciuto DVR
Nota sull'evento playlist in primo piano video in primo piano
prima pagina Volo in atterraggio Decollo del volo
Diminuzione rientro formato Aumento rientro formato Elenco puntato con elenco formato
avanti funzioni Input di
Scheda tastiera etichetta etichetta importante
Struttura etichetta ultima pagina Lancio di
elenco Guida in tempo reale di Condivisione schermo del dispositivo mobile di
Grafico multilinea naviga prima vai a successivo
settimana prossima nota apri in nuovo
aggiunta alla playlist Coda di musica di ripetizione
risposta rispondi a tutti condivisione schermo
Invio di testo breve Grafico programma
Ordinamento Mezza stella: soggetto
: piatta Sommario di in calo
in aumento Annullamento di visualizzazione elenco
Trapunta di visualizzazione Testo a capo: