Google hat seine Material Design Icons mit 4 neuen voreingestellten Themen überarbeitet :

Umrissen, abgerundet, zweifarbig und scharf , zusätzlich zum regulären Filled / Baseline- Thema:

Leider sagt es nirgendwo etwas über die Verwendung der neuen Themen aus.

Ich habe es über Google Web Fonts verwendet, indem ich den folgenden Link eingefügt habe:

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

Verwenden Sie dann das erforderliche Symbol, wie in der Dokumentation vorgeschlagen :

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

Es wird jedoch immer die Version 'Gefüllt / Baseline' angezeigt.

Ich habe Folgendes versucht, um stattdessen das umrissene Thema zu verwenden:

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

und Ändern des Links zu Web-Schriftarten in:

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

usw. Aber es funktioniert nicht.

Und es macht keinen Sinn, so im Dunkeln zu fotografieren.

tl; dr: Hat jemand versucht, die neuen Themen zu verwenden? Funktioniert es überhaupt wie die Basisversion (Inline-HTML-Tag)? Oder soll es nur als SVG- oder PNG-Format heruntergeladen werden?

Danke im Voraus.

Update (31.03.2019): Alle Symbolthemen funktionieren jetzt über Google Web Fonts.

Wie Edric betonte, müssen Sie jetzt nur noch den Link zu Google Web-Schriftarten in den Kopf Ihres Dokuments einfügen:

<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">

Fügen Sie dann die richtige Klasse hinzu, um das Symbol eines bestimmten Themas auszugeben.

<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>

Die Farbe der Symbole kann auch mit CSS geändert werden.

Hinweis: Die zweifarbigen Themensymbole sind derzeit etwas fehlerhaft.

Update (14/11/2018): Liste von 16 Gliederungssymbolen, die mit dem Suffix "_outline" arbeiten.

Hier ist die neueste Liste von 16 Gliederungssymbolen, die mit dem regulären Material-Symbol-Webfont unter Verwendung des Suffixes _outline (getestet und bestätigt) funktionieren .

(Wie auf der Github-Seite für Materialdesign-Symbole zu finden . Suchen Sie nach: " _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> 

Beachten Sie, dass pie_chart Bedürfnisse sein „ pie_chart_ skizzierte “ und nicht skizzieren .

Dies ist ein Hack zum Testen der neuen Symbolthemen mithilfe eines Inline-Tags. Es ist nicht die offizielle Lösung.

Ab heute (19. Juli 2018), etwas mehr als zwei Monate seit Einführung der neuen Symbolthemen, gibt es keine Möglichkeit , diese Symbole mithilfe eines Inline-Tags einzuschließen <i class="material-icons"></i>.

+ Martin hat darauf hingewiesen, dass bei Github ein Problem aufgetreten ist: https://github.com/google/material-design-icons/issues/773

Bis Google eine Lösung dafür gefunden hat, habe ich begonnen, diese neuen Symbolthemen mithilfe eines Hacks in meine Entwicklungsumgebung aufzunehmen, bevor ich die entsprechenden Symbole als SVG oder PNG heruntergeladen habe. Und ich dachte, ich würde es mit euch allen teilen.

WICHTIG : Verwenden Sie dies nicht in einer Produktionsumgebung, da jede der enthaltenen CSS-Dateien von Google eine Größe von über 1 MB hat.

Google verwendet diese Stylesheets, um die Symbole auf der Demoseite anzuzeigen:

Gliederung:

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

Gerundet:

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

Zweifarbig:

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

Scharf:

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

Jede dieser Dateien enthält die Symbole der jeweiligen Themen als Hintergrundbilder (Base64-Bilddaten). Und so können wir die Kompatibilität eines bestimmten Symbols in unserem Design testen, bevor wir es zur Verwendung in der Produktionsumgebung herunterladen.

SCHRITT 1 :

Fügen Sie das Stylesheet des Themas ein, das Sie verwenden möchten. Beispiel: Verwenden Sie für das Thema "Gliederung" das Stylesheet für "Gliederung.css".

SCHRITT 2 :

Fügen Sie Ihrem eigenen Stylesheet die folgenden Klassen hinzu :

.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);
}

SCHRITT 3 :

Verwenden Sie das Symbol, indem Sie dem Tag die folgenden Klassen hinzufügen <i>:

1) material-icons-newKlasse

2) Symbolname wie auf der Demoseite für Materialsymbole angezeigt, dem der Themenname gefolgt von einem Bindestrich vorangestellt ist.

Präfixe:

Umrissen: outline-

Gerundet: round-

Zweifarbig: twotone-

Scharf: sharp-

ZB (für das Symbol "Ankündigung"):

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

3) Verwenden Sie eine optionale 3. Klasse, icon-whiteum die Farbe von Schwarz nach Weiß zu invertieren (für dunkle Hintergründe).

Ändern der Symbolgröße:

Da dies ein Hintergrundbild und kein Schriftsymbol ist, verwenden Sie die Eigenschaften heightund widthvon CSS, um die Größe der Symbole zu ändern. Der Standardwert ist in der material-icons-newKlasse 24px .

Beispiel:

Fall I: Für das umrissene Thema des Symbols account_circle :

1) Fügen Sie das Stylesheet hinzu:

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

2) Fügen Sie das Symbol-Tag auf Ihrer Seite hinzu:

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

Optional (für dunkle Hintergründe):

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

Fall II: Für das scharfe Thema des Bewertungssymbols :

1) Fügen Sie das Stylesheet hinzu:

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

2) Fügen Sie das Symbol-Tag auf Ihrer Seite hinzu:

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

(Für dunkle Hintergründe):

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

Ich kann nicht genug betonen, dass dies NICHT DER RICHTIGE WEG ist, die Symbole in Ihre Produktionsumgebung aufzunehmen. Wenn Sie jedoch mehrere Symbole auf Ihrer in der Entwicklung befindlichen Seite durchsuchen müssen, ist die Aufnahme von Symbolen recht einfach und spart viel Zeit.

Das Herunterladen des Symbols als SVG oder PNG ist sicher eine bessere Option, wenn es um die Optimierung der Site-Geschwindigkeit geht. Schriftarten-Symbole sparen jedoch Zeit, wenn es um die Prototyping-Phase geht und überprüft wird, ob ein bestimmtes Symbol zu Ihrem Design passt usw.

Ich werde diesen Beitrag aktualisieren, wenn Google eine Lösung für dieses Problem findet, bei der kein Symbol zur Verwendung heruntergeladen wird.

Ab dem 27. Februar 2019 gibt es CSS-Schriftarten für die neuen Material Icon-Themen.

Sie müssen jedoch CSS-Klassen erstellen, um die Schriftarten verwenden zu können.

Die Schriftfamilien lauten wie folgt:

• Material Icons Outlined - Umrissene Symbole
• Material Icons Two Tone - Zweifarbige Symbole
• Material Icons Round - Abgerundete Symbole
• Material Icons Sharp - Scharfe Symbole

Ein Beispiel finden Sie im folgenden Codebeispiel:

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>

Oder sehen Sie es auf Codepen

BEARBEITEN: Ab dem 10. März 2019 gibt es anscheinend Klassen für die neuen Schriftsymbole:

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>

BEARBEITEN 2: Hier ist eine Problemumgehung zum Tönen von zweifarbigen Symbolen mithilfe von CSS-Bildfiltern (Code aus diesem Kommentar angepasst ):

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>

Oder sehen Sie es auf Codepen

Für eckiges Material sollten Sie die fontSet-Eingabe verwenden, um die Schriftfamilie zu ändern:

<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>
...

Wenn in Ihrem Webprojekt bereits Material-Icons arbeiten, müssen Sie nur Ihre Referenz in der HTML-Datei und die für Icons verwendete Klasse aktualisieren:

HTML-Referenz:

Vor

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

Nach dem

<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" />

Material Icons Klasse:

Überprüfen Sie danach einfach, welchen Klassennamen Sie verwenden:

Vor:

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

Nach dem:

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

das funktioniert bei mir ... Pura vida!

Was für mich funktioniert hat, ist die Verwendung von _outline und nicht _outline d nach dem Symbolnamen .

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

vs.

<mat-icon>info_outline</mat-icon>

Ab dem 12/05/2020 müssen Sie

1. CSS einschließen:

<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. Verwenden Sie es wie folgt:

<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>

Hinweis: Um beispielsweise einen umrissenen Stil zu verwenden, müssen Sie Material-Symbole UND Material-Symbole-umrissene Klassen angeben .

Neue Themen sind wahrscheinlich (noch?) Nicht Teil der Schriftart Material Icons. Link .

Die jüngste Bearbeitung des Aj334 funktioniert einwandfrei.

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">

Symbolelement

<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>

In keiner der bisherigen Antworten wird erläutert, wie die verschiedenen Varianten dieser Schriftart heruntergeladen werden, damit Sie sie von Ihrer eigenen Website (WWW-Server) aus bereitstellen können.

Während dies aus technischer Sicht als kleines Problem erscheinen mag, ist es aus rechtlicher Sicht ein großes Problem, zumindest wenn Sie beabsichtigen, Ihre Seiten einem EU-Bürger zu präsentieren (oder sogar, wenn Sie dies versehentlich tun). Dies gilt sogar für Unternehmen mit Wohnsitz in den USA (oder einem anderen Land außerhalb der EU).

Wenn jemand interessiert ist, warum dies so ist, werde ich diese Antwort aktualisieren und hier einige Details angeben, aber im Moment möchte ich nicht zu viel Platz außerhalb des Themas verschwenden.

Nachdem ich das gesagt habe:

Ich habe alle Versionen (regulär, umrissen, gerundet, scharf, zweifarbig) dieser Schriftart in zwei sehr einfachen Schritten heruntergeladen (es war die Antwort von @ Aj334 auf seine eigene Frage, die mich auf den richtigen Weg gebracht hat) (Beispiel: "umrissen" "Variante):

1. Holen Sie sich das CSS aus dem Google CDN, indem Sie Ihren Browser direkt die CSS-URL abrufen lassen , dh die folgende URL in die Standortleiste Ihres Browsers kopieren:

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

   Dies gibt eine Seite zurück, die so aussieht (zumindest in Firefox 70.0.1 zum Zeitpunkt des Schreibens):

   /* 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. Suchen Sie die Zeile, die mit src:dem obigen Code beginnt , und lassen Sie Ihren Browser die in dieser Zeile enthaltene URL abrufen , dh kopieren Sie die folgende URL in die Positionsleiste Ihres Browsers:

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

   Jetzt lädt der Browser diese .woff2Datei herunter und bietet an, sie lokal zu speichern (zumindest Firefox).

Zwei abschließende Bemerkungen:

Natürlich können Sie die anderen Varianten dieser Schriftart mit derselben Methode herunterladen. Im ersten Schritt, ersetzen Sie einfach die Zeichenfolge Outlinedin der URL durch die Zeichenfolge Round(ja, wirklich, obwohl hier ist es „Abgerundete“ in dem linken Navigationsmenü aufgerufen), Sharpoder Two+Toneist. Die Ergebnisseite sieht jedes Mal fast gleich aus, aber die URL in der src:Zeile ist natürlich für jede Variante unterschiedlich.

Schließlich können Sie in Schritt 1 sogar diese URL verwenden:

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

Dadurch wird das CSS für alle Varianten auf einer Seite zurückgegeben, die dann fünf src:Zeilen enthält , von denen jede eine andere URL enthält, die angibt, wo sich die jeweilige Schriftart befindet.

Der Link zu den Webfonts funktioniert jetzt in allen Browsern!

Fügen Sie einfach Ihre Themen dem durch eine Pipe ( |) getrennten Schriftlink hinzu

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

Verweisen Sie dann wie folgt auf die Klasse:

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

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

Dieses Muster funktioniert auch mit Winkelmaterial:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

Fügen Sie einen Kopflink zu Google Styles ein

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

und im Körper so etwas

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

Am Ende habe ich die IcoMoon-App verwendet, um eine benutzerdefinierte Schriftart nur mit den neuen Themensymbolen zu erstellen, die ich für einen kürzlich erstellten Web-App-Build benötigt habe. Es ist nicht perfekt, aber Sie können die vorhandene Google Font-Funktionalität mit ein wenig Setup ziemlich gut nachahmen. Hier ist eine Zusammenfassung:

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

Wenn sich jemand traut, kann er das gesamte Thema mit IcoMoon konvertieren. Zur Hölle, IcoMoon hat wahrscheinlich einen internen Prozess, der es einfach machen würde, da sie bereits die ursprünglichen Materialsymbole in ihrer Bibliothek haben.

Auf jeden Fall ist dies keine perfekte Lösung, aber es hat bei mir funktioniert.

Ich war nicht zufrieden damit, dass Google seine neuen Designs noch nicht als Schriftart oder SVG-Symbolsatz veröffentlicht hat, bis ich weiß, dass Google sie noch nicht veröffentlicht hat. Deshalb habe ich ein kleines npm-Paket zusammengestellt, um das Problem zu lösen.

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

Importieren Sie einfach die Symbole, die Sie verwenden möchten, und fügen Sie sie Ihrer Registrierung hinzu. Dies unterstützt auch das Schütteln von Bäumen, da Ihrem Projekt nur die Symbole hinzugefügt werden, die Sie wirklich wollen und / oder brauchen.

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

um beispielsweise zwei Tonsymbole zu verwenden

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

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

In Ihrer HTML-Vorlage können Sie jetzt das neue Symbol verwenden

<mat-icon svgIcon="edit"></mat-icon>

Etwas komisch hat Google eine Schriftart erstellt, die in Safari korrekt funktioniert, in Chrome jedoch nicht. Hier ist die https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

In Bezug auf https://stackoverflow.com/a/54902967/4740291 und nicht in der Lage, die Farbe mit CSS zu ändern.

Einrichten der zweifarbigen Farbe:

Wie oben beschrieben, können Sie die colorCSS-Taste verwenden, mit Ausnahme von Materialien. Zweifarbiges Thema, das unangenehm zu sein scheint ;-)

Eine Abhilfe ist in einer von mehreren Winkelmaterial github beschriebenen Problem ist durch eine benutzerdefinierte CSS - Filter. Dieser benutzerdefinierte Filter kann hier generiert werden .

Z.B:

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%);
}

Anhänge:

• Working Angular Stackblitz
• Codepen Beispiel
• Codepen CSS Filter Generator