Che cosa sono i simboli materiali?
I Simboli Material sono le nostre nuove icone, che consolidano oltre 2.500 glifi in un file con un singolo carattere con un'ampia 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 di simboli dei materiali nel Raccolta di simboli Material
FILL asse
Riempimento ti consente di modificare lo stile predefinito dell'icona. 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 al peso , il riempimento influisce anche sull'aspetto dell'icona.
wght asse
Il peso definisce lo spessore del tratto del simbolo, con un intervallo di pesi compresi tra sottile (100) e grassetto (700). Il peso può anche influire sulla dimensione complessiva del .
GRAD asse
Il peso e la pendenza influiscono sullo spessore di un simbolo. Gli aggiustamenti al voto sono più granulari delle regolazioni della ponderazione e hanno un piccolo impatto il simbolo.
Il voto è 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 di testo ha un valore di voto -25, i simboli possono associarlo 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. 200 gradi): 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 con dimensioni diverse, lo spessore del tratto (spessore) cambia man mano che le dimensioni delle icone vengono ridimensionate. Le dimensioni ottiche offrono un modo per Regola lo spessore del tratto quando aumenti o diminuisci la dimensione 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 relativi ai Materiali sono disponibili in base ai Licenza Apache versione 2.0.
Sfogliare e scaricare singole icone
Il set completo di simboli dei materiali è disponibile sul sito web Raccolta di simboli Material nei formati SVG o PNG. Sono adatte al Web, ad Android e iOS o a qualsiasi strumenti di progettazione.
Repository Git
La Repository git contiene il set completo di simboli materiali in formato SVG.
$ git clone https://github.com/google/material-design-icons
Uso dei simboli Material
Utilizza nel 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 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 anni, grado a 0 e compila (anche 0).
Utilizza la API CSS Fonts per configurare diversi valori degli assi. Dai un'occhiata ai seguenti esempi:
di Gemini Advanced.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. Paga
Supporto per i caratteri variabili di "Can I Use"
per capire se gli utenti sono in grado di caricare la variabile font,
che probabilmente lo sono. Ecco alcuni esempi:
O animali!
Hosting autonomo del carattere
Ospita il
carattere icona
in una posizione sotto il tuo controllo, per decidere quando aggiornare l'asset. Per
Ad esempio, se l'URL è https://example.com/material-symbols.woff, aggiungi il parametro
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 offerte come parte del 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;
}
Utilizzo delle icone nell'HTML
Gli esempi forniti in precedenza utilizzano una caratteristica tipografica chiamata
legature,
che consente il rendering del glifo di un'icona utilizzando semplicemente il suo nome testuale. La
il browser web sostituisce automaticamente la legatura di testo con il vettore di icona e
fornisce un codice più leggibile rispetto al riferimento di caratteri numerici equivalente. Per
ad esempio, nel codice HTML troverai arrow_forward per rappresentare un'icona,
anziché . Per altre icone, utilizza la forma serpente del nome dell'icona
(ovvero sostituisci gli spazi con trattini bassi).
Questa funzionalità è supportata nella maggior parte dei browser moderni, sia su computer che su dispositivi mobili dispositivi mobili. Consulta Supporto per le legature di Can I Use 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 la icone che utilizzano riferimenti a caratteri numerici (ovvero punti di codice), come nell'esempio sotto:
Trova i nomi delle icone e i punti di codice nella Raccolta di simboli Material selezionando un'icona qualsiasi e aprendo il riquadro dei caratteri dell'icona. Ogni carattere dell'icona ha un indice dei punti di codice in Google Fonts Repository git che mostrano l'insieme completo di nomi e codici carattere.
Stili delle icone in Material Design
Queste icone sono state progettate per seguire linee guida su Material Design, e hanno un aspetto migliore quando si utilizzano le dimensioni e i colori consigliati per le icone. Stili di seguito semplificano l'applicazione delle dimensioni, dei colori e degli stati di attività consigliati.
Utilizza in Android
Nella libreria di simboli materiali, tutte le icone sono in formato Drawable vettoriale. A scopri di più, dai un'occhiata Documentazione di Android Vector Asset Studio.
Utilizza in iOS
Le icone sono disponibili anche nel formato Simboli Apple. Per saperne di più, dai un'occhiata ai simboli ufficiali Apple Panoramica e indicazioni sull'utilizzo.
Utilizza in Flutter
È pianificato il supporto di Flutter per i simboli Material. Continua a seguirci per non perderti gli aggiornamenti.