Che cosa sono i simboli dei materiali?
I simboli Material sono le nostre icone più recenti e riuniscono oltre 2500 glifi in un singolo file del carattere con una vasta gamma di varianti di design. I simboli sono disponibili in: tre stili e quattro assi regolabili per i caratteri (riempimento, peso, grado dimensioni ottiche). Visualizza il set completo dei simboli dei materiali nella sezione Simboli dei materiali Raccolta.
Asse FILL
La funzionalità di riempimento ti consente di modificare lo stile predefinito delle icone. Una singola icona può il rendering degli stati riempiti e non riempiti.
Per trasmettere una transizione di stato, utilizza l'asse di riempimento per l'animazione o l'interazione. I valori sono 0 per il valore predefinito o 1 per il riempimento completo. Oltre all'asse del spessore, anche il riempimento influisce sull'aspetto dell'icona.
wght asse
Lo spessore definisce lo spessore del tratto del simbolo, con un intervallo compreso tra sottile (100) e grassetto (700). Il peso può anche influire sulla dimensione complessiva del .
GRAD asse
Lo spessore di un simbolo è influenzato dal tratto e dalla qualità. Gli aggiustamenti al voto sono più granulari rispetto a quelli al peso e hanno un impatto ridotto sulle dimensioni del simbolo.
Il carattere è disponibile anche in alcuni caratteri di testo. Puoi far corrispondere i livelli di pendenza tra testo e simboli per un effetto visivo armonioso. Ad esempio, se il carattere del testo ha un valore di spessore pari a -25, i simboli possono corrispondere a un valore adatto, ad esempio -25.
Puoi utilizzare i voti per diverse esigenze:
Bassa enfasi (ad es. -25 gradi): per ridurre il riflesso per un simbolo chiaro in un ambiente scuro. uno sfondo, usa un voto basso.
Alta enfasi (ad es. classe 200): per evidenziare un simbolo, aumenta il valore positivo .
opsz asse
Le dimensioni ottiche vanno da 20 dp a 48 dp.
Affinché l'immagine abbia lo stesso aspetto a dimensioni diverse, lo spessore del tratto cambia in base alle dimensioni dell'icona. La dimensione ottica consente di regolare automaticamente lo spessore del tratto quando aumenti o diminuisci le dimensioni del simbolo.
Recupero dei simboli del materiale
I simboli dei materiali sono disponibili in vari formati e sono adatti per diverse di tipi di progetti e piattaforme, sia per gli sviluppatori nelle app sia per nei prototipi o nei prototipi.
Licenze
I simboli dei materiali sono disponibili secondo la versione della licenza Apache 2,0 di Google.
Sfogliare e scaricare singole icone
Il set completo dei simboli dei materiali è disponibile nella sezione Simboli dei materiali Raccolta nei formati SVG o PNG. Sono adatti per il web, Android e iOS o con qualsiasi strumento di progettazione.
Repository Git
Il file git di archiviazione contiene il set completo di simboli materiali in formato SVG.
$ git clone https://github.com/google/material-design-icons
Utilizzare i simboli di Material
Utilizzo sul web
Il tipo di carattere Simboli materiali è il modo più semplice per incorporare i simboli dei materiali nei progetti web.
Le icone sono raggruppate in un unico carattere per consentire agli sviluppatori web di incorporare queste icone con poche righe di codice.
Carattere statico con Google Fonts
Il modo più semplice per configurare i caratteri icona da utilizzare in qualsiasi pagina web è tramite Google Fonts. Includi questo singola riga di codice HTML:
<link href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined" rel="stylesheet" />
Lo snippet riportato sopra include la configurazione predefinita per ogni asse , con peso pari a 400, dimensione ottica pari a 48, grado pari a 0 e riempimento (anche 0).
Utilizza l'API CSS Fonts per configurare valori degli assi diversi. Dai un'occhiata ai seguenti esempi:
Carattere variabile con Google Fonts
Se stai animando le icone tramite CSS o desideri avere un maggiore controllo sulle funzionalità delle icone, utilizza
il carattere della variabile Simboli Google. Utilizzando gli intervalli, nel formato number..number,
possiamo caricare l'intero carattere della variabile. Consulta la pagina Supporto dei caratteri variabili di Can I Use per capire se i tuoi utenti saranno in grado di caricare i caratteri variabili, molto probabilmente lo saranno. Ecco alcuni esempi:
O animali!
Ottimizza il carattere dell'icona
Sottoscrivi il carattere in modo da includere solo le icone pertinenti della tua applicazione utilizzando il parametro di query
&icon_names, utilizzando una formula in ordine alfabetico elenco di nomi di icone (legature) separati da virgole.Opzione non consigliata: viene utilizzata l'impostazione predefinita. impostazioni carica tutte le oltre 3.800 icone. Payload del carattere: 295 kB
https://fonts.googleapis.com/css2?family=Material+Symbols+OutlinedConsigliato: specifica i nomi delle icone per caricare solo le icone necessarie. Payload del carattere: 1,7 KB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&icon_names=home,palette,settings&display=blockEsegui l'istanza degli assi dei caratteri variabili per includere solo quelli dell'applicazione . La maggior parte delle applicazioni richiede solo alcune varianti degli assi.
Non consigliato: se manca la configurazione degli assi, viene caricata la font statico predefinito (peso 400, dimensione ottica 24, rotondo 50, grado 0, riempimento 0). In genere non è necessario includere tutti gli assi dei caratteri variabili e questo aumenta il payload. Payload carattere: 7,9 MB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD,ROND@20..48,100..700,0..1,-50..200,0..100Consigliato: viene utilizzata una combinazione specifica di assi. Ad esempio, l'asse completo "RIEMPIMENTO" fornisce transizioni CSS tra gli stati e "ROND" 100 è il design scelto. Payload del carattere: 2,6 kB
https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:FILL,ROND@0..1,100&icon_names=home,palette,settings&display=block
Hosting autonomo del carattere
Ospita il font icon in una posizione sotto il tuo controllo per decidere quando aggiornare la risorsa. Ad esempio, se l'URL è https://example.com/material-symbols.woff, aggiungi la seguente regola CSS:
@font-face {
font-family: 'Material Symbols Outlined';
font-style: normal;
src: url(https://example.com/material-symbols.woff) format('woff');
}
Per visualizzare correttamente il carattere, dichiara le regole CSS per il rendering dell'icona. Questi sono normalmente pubblicate nel foglio di stile dell'API Google Fonts, ma devono essere inclusi manualmente nei progetti durante il self-hosting:
.material-symbols-outlined {
font-family: 'Material Symbols Outlined';
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;
}
Utilizzare le icone in HTML
Gli esempi riportati sopra utilizzano una funzionalità tipografica chiamata
ligature
, che consente di eseguire il rendering di un glifo dell'icona utilizzando il relativo nome di testo. Il browser web sostituisce automaticamente la legatura del testo con il vettore dell'icona e fornisce un codice più leggibile rispetto al riferimento carattere numerico equivalente. Per
ad esempio, nel codice HTML troverai arrow_forward per rappresentare un'icona,
anziché . Per le altre icone, utilizza la notazione a camelia del nome dell'icona (ovvero sostituisci gli spazi con i trattini bassi).
Questa funzionalità è supportata nella maggior parte dei browser moderni, sia su computer che su dispositivi mobili dispositivi mobili. Vedi Posso usare le legature assistenza per vedere se i tuoi utenti sono in grado di elaborare le legature, molto probabilmente è in grado di eseguire.
Se devi supportare i browser che non supportano le legature, specifica le icone utilizzando riferimenti ai caratteri numerici (noti anche come punti di codice), come nell'esempio riportato di seguito:
Puoi trovare i nomi e i punti di codice delle icone nella libreria di simboli Material selezionando un'icona e aprendo il riquadro dei caratteri dell'icona. Ogni carattere tipografico delle icone ha un indice di punti di codice nel repository git di Google Fonts che mostra l'insieme completo di nomi e codici carattere.
Stilare le icone in Material Design
Queste icone sono state progettate in base alle linee guida di Material Design e hanno un aspetto ottimale se utilizzi le dimensioni e i colori consigliati. Stili di seguito semplificano l'applicazione delle dimensioni, dei colori e degli stati di attività consigliati.
Utilizza in Android
Nella raccolta di simboli Material, tutte le icone sono nel formato Vector Drawable. A per saperne di più, dai un'occhiata a Android Vector Asset Studio documentazione.
Utilizza in iOS
Le icone sono disponibili anche in formato Simboli Apple. Per saperne di più, dai un'occhiata ai simboli ufficiali Apple Panoramica e utilizzo assistenza.
Utilizzo in Flutter
È pianificato il supporto di Flutter per i simboli Material. Continua a seguirci per non perderti gli aggiornamenti.