Una panoramica delle icone del materiale, dove trovarle e come integrarle nei tuoi progetti.
Che cosa sono le icone Material?
Le icone dei sistemi di material design sono semplici, moderne, amichevoli e a volte stravagante. Ogni icona viene creata seguendo le nostre linee guida relative alla progettazione per raffigurare in modo semplice i concetti universali usati comunemente in una UI sono minimi. Queste icone garantiscono leggibilità e chiarezza sia di grandi che di piccole dimensioni sono state ottimizzate per una visualizzazione ottimale su tutte le piattaforme e gli annunci display più comuni risoluzioni.
Visualizza il set completo di icone di material design nella raccolta delle icone Material.
Recupero delle icone in corso...
Le icone sono disponibili in diversi formati e si adattano a diversi tipi di progetti e piattaforme, per gli sviluppatori nelle loro app e per i designer i prototipi o i prototipi.
Licenze
Abbiamo messo a disposizione queste icone per poterle incorporare nei tuoi disponibili ai sensi della Licenza Apache versione 2.0. Non esitare a remixare e ricondividere queste icone e la documentazione nel tuo prodotti di big data e machine learning. Ci piacerebbe usare l'attribuzione nella schermata Informazioni della tua app, ma non è obbligatoria.
Sfogliare e scaricare singole icone
Il set completo di icone dei materiali è disponibile nella raccolta delle icone dei materiali. Le icone sono disponibili per il download in SVG o PNG, nei formati che adatto per progetti web, Android e iOS o per l'inclusione in qualsiasi designer i nostri strumenti.
Download di tutti i contenuti
Scarica l'archivio ZIP stabile più recente (~310 MB) di tutte le icone o la versione all'avanguardia del master.
Repository Git
Le icone dei materiali sono disponibili nel repository Git, che contiene il set completo di icone, inclusi tutti i vari formati disponibili.
$ git clone https://github.com/google/material-design-icons/
Carattere icona per il web
Il carattere dell'icona del materiale è il modo più semplice per incorporare le icone dei materiali con per i progetti web. Abbiamo raggruppato tutte le icone dei materiali in un unico font che sfrutta le capacità di rendering tipografiche dei browser moderni per gli sviluppatori web possono incorporare facilmente queste icone con solo poche righe di le API nel tuo codice.
Usare il carattere non è solo il metodo più comodo, ma è anche efficace e "perfetto":
- Oltre 900 icone in un unico file di piccole dimensioni.
- Pubblicati da server di caratteri web di Google oppure possono essere ospitati autonomamente.
- Supportato da tutti i browser web moderni.
- Colorato, dimensionato e posizionato interamente con CSS.
- Basato su vettori: ottimo aspetto su qualsiasi scala, display retina, display con risoluzione bassa schermate.
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 avranno generalmente una dimensione di circa 62 KB, ma questo può essere ridotto notevolmente compilando solo le icone necessarie in un unico file SVG con simbolo sprite.
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. Non devi fare altro che includere una singola riga di codice HTML:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">
Come per altri caratteri web di Google, verrà pubblicato il CSS corretto per attivare i caratteri
"Material Icons" specifico del browser.
Verrà dichiarata un'ulteriore classe CSS chiamata .material-icons.
Qualsiasi elemento che utilizza questa classe avrà il codice CSS corretto per visualizzare queste icone dal carattere web.
Metodo di configurazione 2. Self-hosting
Per coloro che desiderano ospitare autonomamente il carattere web, è necessaria una configurazione aggiuntiva.
Ospita il carattere 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 per eseguire il rendering del carattere correttamente. Queste regole sono in genere previste dalla legge nel foglio di stile dei caratteri web, ma dovranno essere inclusi manualmente nei progetti quando che ospita autonomamente il carattere:
.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 nell'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 il rendering del glifo di un'icona utilizzando semplicemente il suo nome testuale. La sostituzione viene eseguita automaticamente dal browser web e fornisce un codice più leggibile rispetto al riferimento numerico equivalente.
Questa funzionalità è supportata nella maggior parte dei browser moderni su computer e dispositivi mobili.
| Browser | Legature di supporto della versione |
|---|---|
| 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 numerici per specificare le icone, come nell'esempio riportato di seguito:
<span class="material-icons"></span>Trova sia i nomi delle icone che i punti di codice nella raccolta delle icone dei materiali selezionando un'icona e aprendo il riquadro dei caratteri dell'icona. Ogni carattere dell'icona ha un indice di punti di codice nel nostro repository Git che mostra l'insieme completo di nomi e codici carattere (qui).
Stili di icone in material design
Queste icone sono state progettate per rispettare le linee guida per la progettazione dei materiali e hanno un aspetto migliore quando si utilizzano le dimensioni e i colori consigliati. Gli stili riportati di seguito semplificano l'applicazione delle taglie, dei colori e degli stati di attività consigliati.
/* 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
Anche se le icone nel carattere possono essere adattate a qualsiasi dimensione, in conformità con le linee guida per le icone di material design, consigliamo di visualizzarle nei formati 18, 24, 36 o 48 px. Il valore predefinito è 24 px.
Regole CSS per le linee guida standard sulle dimensioni di material design:
.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 usare le regole CSS sopra indicate:
<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
L'utilizzo del carattere icona consente di applicare facilmente lo stile a un'icona di qualsiasi colore. In conformità alle linee guida per le icone Material Design, per le icone attive consigliamo di utilizzare il nero con il 54% di opacità oppure il bianco con il 100% di opacità per la visualizzazione su sfondi chiari o scuri. Se un'icona è disattivata o non attiva, viene utilizzato il nero al 26% o il bianco al 30% rispettivamente per gli sfondi chiari e scuri.
Di seguito sono riportati alcuni esempi che utilizzano gli stili CSS dei materiali descritti sopra:
.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 di disegno di un'icona su uno sfondo chiaro con un colore in primo piano scuro:
<span class="material-icons md-dark">face</span><span class="material-icons md-dark md-inactive">face</span>Esempio di disegno di 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 per fare riferimento all'icona:
<span class="material-icons orange600">face</span>Immagini icone per il Web
Le icone Material sono disponibili anche come immagini normali, in formato PNG e SVG.
SVG
Le icone dei materiali vengono fornite come SVG adatte ai progetti web. Le singole icone sono scaricabili dalla raccolta delle icone dei materiali. Gli SVG sono disponibili anche nelle icone di material design nel repository git sotto il percorso:
material-design-icons/src/
Ad esempio, le icone delle mappe sono disponibili in src/maps:
material-design-icons/src/maps/
Se su un sito web sono in uso più icone, si consiglia di creare fogli sprite dalle immagini. Per ulteriori informazioni, consulta la documentazione nella directory sprite del repository Git.
PN
PNG è il modo più tradizionale per visualizzare le icone sul Web. I download dalla raccolta delle icone dei materiali forniscono densità singola e doppia per ogni icona. Nel download vengono definiti rispettivamente 1x e 2x. Nel repository Git sono disponibili anche icone:
material-design-icons/png/
Se su un sito web sono in uso più icone, si consiglia di creare fogli sprite dalle immagini. Per ulteriori informazioni, consulta i suggerimenti nella directory sprite del 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 avere un aspetto ottimale su qualsiasi dispositivo.
Le icone sono disponibili anche nel repository Git delle icone di Material Design nella stessa combinazione di colori e dimensioni, denominate come segue:
Il Drawable vettoriale è attualmente disponibile solo come icona nera a 24 dp. Ciò è dovuto alla compatibilità con le nostre dimensioni di icone più standard. Per visualizzare l'icona in un colore diverso, utilizza 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à dello schermo non supporti Vector Drawables.
Icone per iOS
Le icone Material funzionano bene anche nelle app per iOS. Sia nella raccolta delle icone dei materiali che nel repository git, queste icone sono raggruppate 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 di risorse oppure copiando la cartella nella cartella xcasset.
Il set di immagini contiene le immagini a densità singola, doppia e tripla (1x, 2x, 3x), quindi funzionano su tutte le densità di schermo iOS note. Vengono fornite entrambe le icone in bianco e nero, ma ti consigliamo di utilizzare UIImage's imageWithRenderingMode con UIImageRenderingModeAlwaysTemplate che consentirà di utilizzare l'immagine come maschera alfa che può essere colorata con qualsiasi colore possibile.
Esempio di Objective-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 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 RTL
Lingue come l'arabo e l'ebraico vengono lette da destra a sinistra (RTL). Per le lingue RTL, le UI devono essere sottoposte a mirroring per visualizzare la maggior parte degli elementi in RTL. Quando viene eseguito il mirroring di un'interfaccia utente per RTL, anche alcune icone dovrebbero essere speculari. Quando il testo, il layout e l'iconografia vengono speculari per supportare le UI da destra a sinistra, tutto ciò che riguarda il tempo deve essere raffigurato come un movimento da destra a sinistra. Ad esempio, il punto in avanti punta a sinistra e all'indietro verso destra. Tuttavia, tieni presente che anche il contesto in cui viene posizionata l'icona influisce sulla possibilità che un'icona venga speculare o meno.
Le icone devono essere speculari solo se la loro direzione corrisponde ad altri elementi UI in modalità RTL. Quando un'icona rappresenta funzionalità visive del tuo sito web diverse in RTL, l'icona deve essere visualizzata anche in RTL. Ad esempio, se i numeri in un elenco numerato si trovano sul lato destro in lingua RTL, i numeri dovrebbero trovarsi sul lato destro dell'icona speculare.
Icone RTL su Android
In questo articolo per sviluppatori Android viene descritta in modo approfondito come implementare le interfacce utente RTL. Per impostazione predefinita, su Android, le icone non vengono mostrate quando la direzione del layout viene riflessa. Se necessario, devi eseguire il mirroring specifico delle icone appropriate, fornendo asset specializzati 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 i disegnabili. Se questo attributo è impostato su true, il drawable verrà eseguito automaticamente con il mirroring 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 l'utilizzo del mirroring automatico o l'offerta di risorse Drawable alternative non è possibile, l'attributo ImageView scaleX può essere utilizzato anche per eseguire il mirroring dei drawable (ad esempio fornendo un layout specifico per RTL 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 contenuti drawable in modo programmatico.
Controlla manualmente la direzione del layout utilizzando getLayoutDirection:
if (ViewCompat.getLayoutDirection(view) == ViewCompat.LAYOUT_DIRECTION_RTL) {
// custom code
}
Mirroring dei contenuti ImageView in modo programmatico:
imageView.setScaleX(-1);
Icone RTL su iOS
iOS prevede il concetto di UISemanticContentAttribute associato a ogni vista. Può essere unspecified, forceLeftToRight, forceRightToLeft, playback o spatial. iOS utilizza questo valore e l'impostazione (LTR)/RTL (da sinistra a destra) del dispositivo che presenta l'interfaccia per determinare l'efficace LayoutDirection della vista. Questa LayoutDirection efficace determina se eseguire il mirroring o meno di un'immagine quando viene visualizzata.
Per impostazione predefinita, contenuto semantico è impostato su unspecified. Questo ne determina il mirroring in modalità RTL. Se non vuoi che un'icona venga mai sottoposta a mirroring, devi impostarla esplicitamente su forceLeftToRight. Apple segnala alcune eccezioni che non devono essere speculari, come la riproduzione di contenuti multimediali (avanzamento veloce, riavvolgimento e così via), note musicali, immagini che indicano il passare del tempo ecc.
Esempio di Objective-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
Consigliamo il seguente articolo come guida introduttiva alla tecnologia 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, le icone non vengono mostrate quando la direzione del layout viene riflessa. Devi replicare in modo specifico le 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 con ImageMagick
Se non è possibile eseguire il mirroring delle icone nel codice, puoi utilizzare ImageMagick per eseguire il mirroring orizzontale dell'immagine.
convert -flop my_icon.png my_icon_rtl.png
Quali icone devono essere visualizzate con mirroring per RTL?
Di seguito è riportato un elenco di icone che possono essere sincronizzate in modo programmatico in RTL:
| Freccia indietro di | Freccia indietro di su iOS | Freccia avanti di |
| Freccia avanti: su iOS | Freccia sinistra: | Freccia destra di |
| compito | Restituzione del compito | Backspace |
| Batteria: sconosciuta | chiamata effettuata | Unione di chiamate |
| chiamata persa | chiamata senza risposta in uscita | chiamata ricevuta |
| Suddivisione delle chiamate di | Freccia di avanzamento a sinistra | Freccia di a destra |
| modalità lettore di Chrome | dispositivo sconosciuto | DVR |
| nota sull'evento | Play list in primo piano di | Video in primo piano di |
| prima pagina | Atterraggio volo | decollo dell'aereo |
| Diminuzione del rientro formato | Aumento del rientro formato | Elenco dei formati puntato |
| avanti | funzioni | Input di |
| Scheda della tastiera | etichetta | Etichetta importante |
| Struttura etichetta | ultima pagina | Lancio di |
| elenco | Assistenza in tempo reale di | Condivisione schermo su dispositivi mobili |
| Grafico multilinea di | Naviga prima di | Avanti di |
| settimana prossima | nota | si apre in una nuova finestra |
| Aggiunta alla playlist | di musica in coda | ripeti |
| risposta | rispondi a tutti | Condivisione schermo |
| Invio di | testo breve | mostra grafico |
| Ordinamento di | stella/e a metà | soggetto |
| : stazionario | toc | in calo |
| in aumento | Annulla | visualizza elenco |
| visualizza trapunta | Testo a capo |