Come utilizzare i nuovi temi dell'icona di progettazione dei materiali: Delineato, Arrotondato, Bicolore e Nitido?

171

Google ha rinnovato le sue icone di design dei materiali con 4 nuovi temi preimpostati:

Delineato, arrotondato, bicolore e nitido , oltre al normale tema Riempito / Base :

Ma, sfortunatamente, non dice da nessuna parte come utilizzare i nuovi temi.

Lo sto usando tramite Google Web Fonts includendo il link:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

E quindi usando l'icona richiesta come suggerito nella documentazione :

<i class="material-icons">account_balance</i>

Ma mostra sempre la versione 'Riempito / Baseline'.

Ho provato a fare quanto segue per utilizzare invece il tema delineato :

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

e, modificando il collegamento Font Web in:

<link href="https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined" rel="stylesheet">

ecc. Ma non funziona.

E non ha senso fare scatti al buio in quel modo.

tl; dr: qualcuno ha provato ad usare i nuovi temi? Funziona anche come la versione di base (tag HTML incorporato)? Oppure, deve essere scaricato solo in formato SVG o PNG?

Grazie in anticipo.

icons  material-design  google-material-icons 
— Ashil John
fonte

Risposte:

172

Aggiornamento (31/03/2019): tutti i temi delle icone funzionano ora tramite Google Web Fonts.

Come sottolineato da Edric, si tratta solo di aggiungere ora il link dei font web di Google nella testa del documento, in questo modo:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

E quindi aggiungendo la classe corretta per generare l'icona di un tema particolare.

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

Il colore delle icone può essere modificato anche tramite CSS.

Nota: al momento le icone a tema bicolore sono un po 'glitch.

Aggiornamento (14/11/2018): Elenco di 16 icone di struttura che funzionano con il suffisso "_outline".

Ecco l'elenco più recente di 16 icone di contorno che funzionano con il normale Web-icone Materiale-icone, usando il suffisso _outline (testato e confermato).

(Come si trova nella pagina github di material-design-icons . Cerca: " _outline_24px.svg ")

<i class="material-icons">help_outline</i> 
<i class="material-icons">label_outline</i> 
<i class="material-icons">mail_outline</i> 
<i class="material-icons">info_outline</i> 
<i class="material-icons">lock_outline</i> 
<i class="material-icons">lightbulb_outline</i> 
<i class="material-icons">play_circle_outline</i> 
<i class="material-icons">error_outline</i> 
<i class="material-icons">add_circle_outline</i> 
<i class="material-icons">people_outline</i> 
<i class="material-icons">person_outline</i> 
<i class="material-icons">pause_circle_outline</i> 
<i class="material-icons">chat_bubble_outline</i> 
<i class="material-icons">remove_circle_outline</i> 
<i class="material-icons">check_box_outline_blank</i> 
<i class="material-icons">pie_chart_outlined</i>

Si noti che pie_chart deve essere " pie_chart_ delineato " e non struttura .

Questo è un trucco per testare i nuovi temi delle icone usando un tag incorporato. Non è la soluzione ufficiale.

Ad oggi (19 luglio 2018), a poco più di 2 mesi da quando sono stati introdotti i nuovi temi delle icone, non c'è modo di includere queste icone usando un tag in linea <i class="material-icons"></i>.

+ Martin ha sottolineato che su Github è stato sollevato un problema relativo allo stesso: https://github.com/google/material-design-icons/issues/773

Quindi, fino a quando Google non trova una soluzione per questo, ho iniziato a utilizzare un hack per includere questi nuovi temi di icone nel mio ambiente di sviluppo prima di scaricare le icone appropriate come SVG o PNG. E ho pensato di condividerlo con tutti voi.

IMPORTANTE : non utilizzarlo in un ambiente di produzione poiché ciascuno dei file CSS inclusi da Google ha dimensioni superiori a 1 MB.

Google utilizza questi fogli di stile per mostrare le icone sulla loro pagina demo:

Contorno:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Rounded:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Due toni:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Acuto:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Ognuno di questi file contiene le icone dei rispettivi temi inclusi come immagini di sfondo (dati immagine Base64). Ed ecco come possiamo usarlo per testare la compatibilità di una particolare icona nel nostro design prima di scaricarlo per l'uso nell'ambiente di produzione.

PASSO 1 :

Includi il foglio di stile del tema che desideri utilizzare. Ad esempio: per il tema "Delineato", usa il foglio di stile per "outline.css"

PASSAGGIO 2 :

Aggiungere le seguenti classi per il vostro proprio foglio di stile:

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

PASSAGGIO 3 :

Utilizzare l'icona aggiungendo le seguenti classi al <i>tag:

1) material-icons-newclasse

2) Nome dell'icona come mostrato nella pagina dimostrativa delle icone dei materiali, preceduta dal nome del tema seguito da un trattino.

prefissi:

delineato: outline-

Rounded: round-

Due toni: twotone-

Acuto: sharp-

Ad esempio (per l'icona "annuncio"):

outline-announcement, round-announcement, twotone-announcement,sharp-announcement

3) Utilizzare una terza classe opzionale icon-whiteper invertire il colore dal nero al bianco (per sfondi scuri)

Modifica della dimensione dell'icona:

Poiché si tratta di un'immagine di sfondo e non di un'icona di carattere, utilizzare le proprietà heighte widthdel CSS per modificare la dimensione delle icone. L'impostazione predefinita è 24px nella material-icons-newclasse.

Esempio:

Caso I: Per la Delineato Tema del account_circle dell'icona:

1) Includi il foglio di stile:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2) Aggiungi il tag icona sulla tua pagina:

<i class="material-icons-new outline-account_circle"></i>

Opzionale (per sfondi scuri):

<i class="material-icons-new outline-account_circle icon-white"></i>

Caso II: per il tema Sharp dell'icona di valutazione :

1) Includi il foglio di stile:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2) Aggiungi il tag icona sulla tua pagina:

<i class="material-icons-new sharp-assessment"></i>

(Per sfondi scuri):

<i class="material-icons-new sharp-assessment icon-white"></i>

Non posso sottolineare abbastanza che questo NON È IL MODO GIUSTO per includere le icone nel tuo ambiente di produzione. Ma se devi scansionare più icone nella tua pagina di sviluppo, rende l'inclusione delle icone abbastanza semplice e fa risparmiare molto tempo.

Il download dell'icona come SVG o PNG è sicuramente un'opzione migliore quando si tratta di ottimizzazione della velocità del sito, ma le icone dei font fanno risparmiare tempo quando si tratta della fase di prototipazione e controllando se una particolare icona si adatta al tuo design, ecc.

Aggiornerò questo post se e quando Google troverà una soluzione per questo problema che non comporta il download di un'icona per l'utilizzo.

— Ashil John
fonte
Ciao! questo è abbastanza utile, ma non riesco ancora a includere la mia icona, voglio includere screen_share, ho provato con la classe .outline-screen_share ma non stampa nulla, accetto la classe nell'ispettore ed esiste, potrei perdere qualche passo?
— Cucuru,
1
@cucuru Grazie, penso che ti sia perso il passaggio 2 . Aggiungendo prima la classe .material-icons-newe le sue proprietà al proprio foglio di stile, quindi chiamando l'icona <i class="material-icons-new outline-screen_share"></i>.
— Ashil John,
1
Ora sembrano esserci nuovi caratteri CSS per i nuovi temi delle icone materiali: codepen.io/Chan4077/pen/bZNyQG
— Edric
Grande! Funziona come un fascino.
— Soorya,
Per il materiale angolare, è necessario utilizzare fontSetinvece di class. Vedi la risposta di Ron Netzer di seguito dal 14/08/19.
— Russ,
32

A partire dal 27 febbraio 2019, ci sono caratteri CSS per i nuovi temi delle icone materiali.

Tuttavia, è necessario creare classi CSS per utilizzare i caratteri.

Le famiglie di caratteri sono le seguenti:

  • Material Icons Outlined - Icone delineate
  • Material Icons Two Tone - Icone bicolore
  • Material Icons Round - Icone arrotondate
  • Material Icons Sharp - Icone nitide

Vedi l'esempio di codice di seguito per un esempio:

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

.material-icons-outlined,
.material-icons.material-icons--outlined {
  font-family: 'Material Icons Outlined';
}

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

.material-icons-round,
.material-icons.material-icons--round {
  font-family: 'Material Icons Round';
}

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>
Espandi frammento

O visualizzalo su Codepen

EDIT: dal 10 marzo 2019, sembra che ora ci siano classi per le nuove icone dei caratteri:

body {
  font-family: Roboto, sans-serif;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>
Espandi frammento

EDIT # 2: Ecco una soluzione alternativa per colorare le icone a due toni utilizzando i filtri immagine CSS (codice adattato da questo commento ):

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>
Espandi frammento

O visualizzalo su Codepen

— Edric
fonte
3
Sembra che l' colorattributo CSS al momento non influenzi il colore dei nuovi temi delle icone materiali.
— Edric,
1
L'icona delineata non funziona, vale a dire? Qualche idea?
— Jismon Thomas,
1
non si presenta affatto, anche se si esegue questa pagina su ie, si può vedere che è solo uno spazio vuoto, ho finito per usare la baseline su ie!
— Jismon Thomas
Sembra che la colorproprietà sia supportata su tutte le icone tranne le icone a due toni. (Testato ad oggi)
— Edric,
17

Per materiale angolare è necessario utilizzare l'input fontSet per modificare la famiglia di caratteri:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...
— Ron
fonte
12

Se hai già icone materiali che funzionano nel tuo progetto web, devi solo aggiornare il tuo riferimento nel file html e la classe usata per le icone:

riferimento html:

Prima

<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet" />

Dopo

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

classe materiale icone:

Dopodiché basta controllare quale className stai usando:

Prima:

<i className="material-icons">weekend</i>

Dopo:

<i className="material-icons-outlined">weekend</i>

che funziona per me ... Pura vida!

— rocaes90
fonte
10

Quello che ha funzionato per me è usare _outline non _outline d dopo il nome dell'icona.

<mat-icon>info</mat-icon>

vs 

<mat-icon>info_outline</mat-icon>
— fxrxz
fonte
Ah-ah, quindi funziona così su Angular; è abbastanza pulito.
— Ashil John,
5
ci sono alcune icone che sono contorni e ha il suffisso _outline. Funziona solo per quelli
— Sangmin Lee,
@SangminLee sì, questo è l'elenco delle icone dove dovrebbe funzionare. material.io/tools/icons/?style=outline
— fxrxz
@ Aj334 sì, è pulito, puoi anche accettare questa risposta se ha risposto alla tua domanda?
— fxrxz,
1
Ho appena usato questo con il semplice carattere web Materiale in un progetto React.js. Quindi non ha nulla a che fare con Angular. Penso che questa sia la soluzione.
— Juuro,
9

A partire dal 12/05/2020, è necessario

1. include CSS:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

2. Usalo in questo modo:

<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>

Nota: ad esempio, per utilizzare lo stile delineato, è necessario specificare le classi del materiale-icone E del materiale-icone delineate .

— Vano Maisuradze
fonte
Per Angolare, utilizzare <mat-icon class="material-icons-two-tone">alarm</mat-icon>. Sostituire la classe sia con material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharpo material-icons-round. E sostituisci l'allarme con qualsiasi nome di icona da: material.io/resources/icons/?icon=assessment&style=baseline
— Quad Coders
Usando mat-icon significa, stai aggiungendo un modulo aggiuntivo, che aumenta le dimensioni dell'app (beh, aumenta un po ', ma a volte qualche kb è importante)
— Vano Maisuradze,
@VanoMaisuradze puoi collegarti al documento?
— Mehulkumar,
AFAIK, non esiste un documento per questo.
— Vano Maisuradze,
5

I nuovi temi probabilmente non fanno (ancora?) Parte del font Material Icons. Link .

— balestruccio
fonte
Quel progetto non ha pubblicato un'uscita da 2 anni, non sto trattenendo il respiro.
— Coderer,
3

La recente modifica dell'Aj334 funziona perfettamente.

google CDN

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Elemento icona

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
— lakshmeesha
fonte
3

Nessuna delle risposte finora spiega come scaricare le varie varianti di quel carattere in modo da poterle servire dal tuo sito web (server WWW).

Anche se questo può sembrare un problema minore dal punto di vista tecnico, è un grosso problema dal punto di vista legale, almeno se si intende presentare le proprie pagine a qualsiasi cittadino dell'UE (o anche, se lo si fa per caso). Ciò è vero anche per le aziende che risiedono negli Stati Uniti (o in qualsiasi paese al di fuori dell'UE).

Se qualcuno è interessato al perché, aggiornerò questa risposta e fornirò alcuni dettagli qui, ma al momento non voglio sprecare troppo spazio fuori tema.

Avendo detto questo:

Ho scaricato tutte le versioni (regolari, delineate, arrotondate, nitide, bicolore) di quel font seguendo due semplici passaggi (è stata la risposta di @ Aj334 alla sua domanda che mi ha portato sulla strada giusta) (esempio: "delineato "variante):

  1. Ottieni il CSS da Google CDN lasciando che il tuo browser recuperi direttamente l'URL CSS , ovvero copi il seguente URL nella barra degli indirizzi del browser:

    https://fonts.googleapis.com/css?family=Material+Icons+Outlined

    Ciò restituirà una pagina simile a questa (almeno in Firefox 70.0.1 al momento della stesura di questo):

    /* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

.material-icons-outlined {
  font-family: 'Material Icons Outlined';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

  2. Trova la riga che inizia con src:il codice sopra e lascia che il tuo browser recuperi l'URL contenuto in quella riga , cioè copi il seguente URL nella barra degli indirizzi del tuo browser:

    https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2

    Ora il browser scaricherà quel .woff2file e offrirà di salvarlo localmente (almeno, Firefox ha fatto).

Due osservazioni finali:

Ovviamente, puoi scaricare le altre varianti di quel font usando lo stesso metodo. Nel primo passaggio, basta sostituire la sequenza di caratteri Outlinednell'URL con le sequenze di caratteri Round(sì, davvero, anche se qui si chiama "Arrotondato" nel menu di navigazione a sinistra), Sharpo Two+Tone, rispettivamente. La pagina dei risultati sarà quasi uguale ogni volta, ma l'URL nella src:riga ovviamente è diverso per ogni variante.

Infine, nel passaggio 1, puoi persino usare quell'URL:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

Ciò restituirà il CSS per tutte le varianti in una pagina, che contiene quindi cinque src:righe, ognuna con un altro URL che designa la posizione del rispettivo carattere.

— Binarus
fonte
2

Il collegamento webfonts funziona ora, in tutti i browser!

Aggiungi semplicemente i tuoi temi al collegamento del carattere separato da una pipe ( |), in questo modo

<link href="https://fonts.googleapis.com/icon?family=Material+Icons|Material+Icons+Outlined" rel="stylesheet">

Quindi fai riferimento alla classe, in questo modo:

// class="material-icons" or class="material-icons-outlined"

<i class="material-icons">account_balance</i>
<i class="material-icons-outlined">account_balance</i>

Questo modello funzionerà anche con materiale angolare:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>
— intergalattico
fonte
Manterrò questo semplice approccio fino a quando non uscirà la soluzione di attributo. Good one @intergalactic
— Sparker73
Cosa succede se ottengo le icone tramite dependenciesin package.json dell'app anziché <link>? Non riesco a includere le icone delineate nell'URL ...
— Jago
1

Inserisci il link principale agli stili di Google

<link href="https://fonts.googleapis.com/icon?family=Material+Icons+Outlined" rel="stylesheet">

e nel corpo qualcosa del genere 

<i class="material-icons-outlined">bookmarks</i>
— Володимир Лук'янюк
fonte
0

Ho finito per usare l'app IcoMoon per creare un font personalizzato usando solo le nuove icone a tema che avevo richiesto per una recente creazione di app web. Non è perfetto, ma puoi imitare la funzionalità esistente di Google Font abbastanza bene con un po 'di configurazione. Ecco un commento:

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

Se qualcuno si sente audace, potrebbe convertire l'intero tema usando IcoMoon. Diavolo, probabilmente IcoMoon ha un processo interno che lo renderebbe più semplice dato che hanno già le icone materiali originali nella loro libreria.

Comunque, questa non è una soluzione perfetta, ma ha funzionato per me.

— Lee Martin
fonte
0

Non ero soddisfatto del fatto che fino a quando Google non avesse ancora pubblicato i suoi nuovi design come set di icone font o svg. Pertanto ho messo insieme un piccolo pacchetto npm per risolvere il problema.

https://www.npmjs.com/package/ts-material-icons-svg

Importa semplicemente le icone che desideri utilizzare e aggiungile al registro. Questo supporta anche lo scuotimento degli alberi poiché al tuo progetto vengono aggiunte solo quelle icone che desideri davvero e / o di cui hai bisogno.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

per usare due icone di tono, ad esempio

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

Nel tuo modello html ora puoi usare la nuova icona

<mat-icon svgIcon="edit"></mat-icon>
— MarcusCalidus
fonte
0

Impostazione del colore bicolore:

Come descritto sopra puoi usare il colortasto css ad eccezione dei materiali Tema bicolore che sembra essere glitch ;-)

Una soluzione alternativa è descritta in uno dei numerosi problemi di github del materiale angolare utilizzando un filtro CSS personalizzato. Questo filtro personalizzato può essere generato qui .

Per esempio:

html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-two-tone red">home</i>

css:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

allegati:

— zerocewl
fonte
Utilizzando il nostro sito, riconosci di aver letto e compreso le nostre Informativa sui cookie e Informativa sulla privacy.
Licensed under cc by-sa 3.0 with attribution required.