Che cosa sono i simboli dei materiali?
I simboli Material sono le nostre icone più recenti, che consolidano oltre 2500 glifi in un unico file di carattere con una vasta gamma di varianti di design. I simboli sono disponibili in tre stili e quattro assi dei caratteri variabili regolabili (riempimento, spessore, gradazione e dimensione ottica). Vedi il set completo dei simboli dei materiali nella libreria dei simboli dei materiali.
FILL asse
Il riempimento ti consente di modificare lo stile predefinito delle icone. Una singola icona può visualizzare sia gli stati vuoti sia quelli riempiti.
Per trasmettere una transizione di stato, utilizza l'asse di riempimento per l'animazione o l'interazione. I valori sono 0 per impostazione predefinita o 1 per valori completati. Insieme all'asse del peso, anche il riempimento influisce sull'aspetto dell'icona.
wght asse
Lo spessore definisce lo spessore del tratto del simbolo, con un intervallo di pesi compreso tra sottile (100) e grassetto (700). La ponderazione può anche incidere sulle dimensioni complessive del simbolo.
GRAD asse
Spessore e gradazione influiscono sullo spessore di un simbolo. Gli aggiustamenti alla pendenza sono più granulari delle regolazioni della ponderazione e hanno un piccolo impatto sulle dimensioni del simbolo.
Il voto è disponibile anche in alcuni caratteri di testo. Puoi far corrispondere i livelli di pendenza tra testo e simboli per ottenere un effetto visivo armonioso. Ad esempio, se il carattere del testo ha un valore di voto -25, i simboli possono associarlo a un valore appropriato, ad esempio -25.
Puoi utilizzare il voto per esigenze diverse:
Enfasi bassa (ad es. grado -25): per ridurre il riflesso di un simbolo chiaro su uno sfondo scuro, utilizza un livello basso.
Enfasi elevata (ad es. voto 200): per evidenziare un simbolo, aumenta il voto positivo.
opsz asse
Le dimensioni ottiche vanno da 20 dp a 48 dp.
Affinché l'immagine abbia lo stesso aspetto con dimensioni diverse, lo spessore del tratto cambia man mano che le dimensioni dell'icona vengono ridimensionate. Le dimensioni ottiche consentono di regolare automaticamente il peso del tratto quando aumenti o diminuisci la dimensione del simbolo.
Recupero dei simboli Material
I simboli Material sono disponibili in diversi formati e sono adatti a diversi tipi di progetti e piattaforme, sia per gli sviluppatori nelle loro app che per i designer nei loro prototipi o nei loro prototipi.
Licenze
I simboli materiali sono disponibili ai sensi della versione 2.0 della licenza Apache.
Navigazione e download di singole icone
Il set completo dei simboli Material è disponibile nella libreria dei simboli Material nei formati SVG o PNG. Sono adatti per web, Android e iOS o con qualsiasi strumento di progettazione.
Repository Git
Il repository Git contiene il set completo di Material Symbols in formato SVG.
$ git clone https://github.com/google/material-design-icons
Uso dei simboli sui materiali
Utilizza nel web
Il carattere Material Symbols è il modo più semplice per incorporare Material Symbols nei progetti web.
Le icone sono assemblate in un unico carattere in modo che gli sviluppatori web possano facilmente incorporarle con poche righe di codice.
Carattere statico con Google Fonts
Il modo più semplice per impostare i caratteri delle icone da utilizzare in qualsiasi pagina web è tramite Google Fonts. Includi questa 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 a 400, dimensione ottica a 48, grado a 0 e riempimento (anche 0).
Utilizza l'API Fonts CSS per configurare diversi valori degli assi. Dai un'occhiata ai seguenti esempi:
Carattere variabile con Google Fonts
Se vuoi animare le icone tramite CSS o vuoi un controllo più preciso sulle funzionalità delle icone, utilizza il carattere variabile Simboli di Google. Con gli intervalli, nel formato number..number,
possiamo caricare l'intero carattere della variabile. Consulta il
supporto per i caratteri variabili di Can I Use
per capire se i tuoi utenti sono in grado di caricare il carattere variabile, molto probabilmente lo sono. Ecco alcuni esempi:
o persino animarli.
Hosting autonomo del carattere
Ospita il carattere dell'icona in una posizione che puoi controllare per decidere quando aggiornare l'asset. 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. Queste regole vengono generalmente pubblicate come parte del foglio di stile dell'API Google Fonts, ma devono essere incluse manualmente nei progetti durante l'hosting autonomo:
.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;
}
Utilizzo delle icone in HTML
Gli esempi forniti sopra utilizzano una funzionalità tipografica chiamata legature, che consente di visualizzare il glifo di un'icona semplicemente utilizzando il suo nome testuale. Il browser web sostituisce automaticamente la legatura del testo con il vettore icona e fornisce un codice più leggibile rispetto al riferimento al carattere numerico equivalente. Ad
esempio, nel tuo HTML avrai arrow_forward per rappresentare un'icona,
anziché . Per altre icone, utilizza la maiuscola a forma di serpente nel nome dell'icona (ad esempio, sostituisci gli spazi con i trattini bassi).
Questa funzionalità è supportata nella maggior parte dei browser moderni, sia su computer sia sui dispositivi mobili. Consulta la pagina Supporto delle legature Can I Use per vedere se i tuoi utenti saranno in grado di elaborare le legature, molto probabilmente potrebbero farlo.
Se devi supportare i browser che non supportano le legature, specifica le icone utilizzando riferimenti a caratteri numerici (ovvero punti di codice) come nell'esempio riportato di seguito:
Trova i nomi delle icone e i punti di codice nella libreria dei simboli Material selezionando una qualsiasi icona e aprendo il relativo riquadro. Il carattere di ogni icona ha un indice dei punti di codice nel repository git di Google Fonts che mostra l'insieme completo di nomi e codici carattere.
Stili delle icone in Material Design
Queste icone sono state progettate in conformità alle linee guida di Material Design e hanno un aspetto migliore quando vengono utilizzate le dimensioni e i colori consigliati per le icone. Gli stili riportati di seguito semplificano l'applicazione delle dimensioni, dei colori e degli stati delle attività che consigliamo.
Utilizza in Android
Nella libreria dei simboli dei materiali, tutte le icone sono nel formato di disegno vettoriale. Per ulteriori informazioni, consulta la documentazione di Android Vector Asset Studio.
Utilizza in iOS
Le icone sono disponibili anche in formato Apple Symbols. Per saperne di più, consulta la panoramica e le indicazioni sull'utilizzo ufficiali sui simboli Apple.
Utilizza in Flutter
È previsto il supporto di Flutter per i simboli materiali. Tieniti informato.