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.
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:
<span class="material-icons"></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:
<span class="material-icons md-18">face</span>
<span class="material-icons md-24">face</span>
<span class="material-icons md-36">face</span>
<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:
<span class="material-icons md-dark">face</span>
<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:
<span class="material-icons md-light">face</span>
<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:
<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.
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 | compitoBackspace |
Batteria | sconosciutachiamata effettuata | Unione di chiamate |
chiamata senza risposta | chiamata senza risposta in uscita | chiamata ricevuta |
Suddivisione chiamata | Freccia di espansione | a sinistrafreccia 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 atterraggioDecollo 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 | visualizzazioneTesto a capo: |