Wie kann ich Materialsymbole offline hosten?

Ich entschuldige mich, wenn dies eine sehr einfache Frage ist, aber wie verwenden Sie Google-Material-Symbole ohne ein

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

?

Ich möchte, dass meine App die Symbole auch dann anzeigen kann, wenn der Benutzer keine Internetverbindung hat

Methode 2. Selbsthosting- Entwicklerhandbuch

Laden Sie die neueste Version von github herunter (Assets: Zip-Datei), entpacken Sie sie und kopieren Sie den Ordner iconfont mit den Symboldateien für das Materialdesign in Ihr lokales Projekt - https://github.com/google/material-design-icons/ Veröffentlichungen

Sie müssen nur den Ordner iconfont aus dem Archiv verwenden: Er enthält die Symbolschriftarten in den verschiedenen Formaten (für die Unterstützung mehrerer Browser) und das Boilerplate-CSS.

• Ersetzen Sie die Quelle im URL-Attribut von @ font-face durch den relativen Pfad zum Ordner iconfont in Ihrem lokalen Projekt (wo sich die Schriftdateien befinden), z. URL ("iconfont / MaterialIcons-Regular.ttf")

@font-face {
   font-family: 'Material Icons';
   font-style: normal;
   font-weight: 400;
   src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
   src: local('Material Icons'),
        local('MaterialIcons-Regular'),
        url(iconfont/MaterialIcons-Regular.woff2) format('woff2'),
        url(iconfont/MaterialIcons-Regular.woff) format('woff'),
        url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

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

NPM / Bower-Pakete

Google hat offiziell eine Bower- und NPM-Abhängigkeitsoption - folgen Sie dem Material Icons Guide 1

Laube benutzen :bower install material-design-icons --save

Verwenden von NPM :npm install material-design-icons --save

Materialsymbole : Alternativ können Sie die Schriftart des Materialdesignsymbols und das CSS-Framework für das Selbsthosting der Symbole unter @ marellas https://marella.me/material-icons/ überprüfen.

Hinweis

Es scheint, dass Google das Projekt im wartungsarmen Modus hat. Die letzte Veröffentlichung war zum Zeitpunkt des Schreibens vor 3 Jahren!

Diesbezüglich gibt es auf GitHub mehrere Probleme, aber ich möchte auf den Kommentar von @cyberalien zu diesem Problem verweisen, in dem Is this project actively maintained? #951auf mehrere Community-Projekte verwiesen wird, die Materialsymbole gespalten haben und weiterhin beibehalten.

Ich baue für Angular 4/5 und arbeite oft offline. Daher hat das Folgende für mich funktioniert. Installieren Sie zuerst das NPM:

npm install material-design-icons --save

Fügen Sie dann Folgendes zu styles.css hinzu:

@import '~material-design-icons/iconfont/material-icons.css';

Die oberen Ansätze funktionieren bei mir nicht. Ich habe die Dateien von github heruntergeladen, aber der Browser hat die Schriftarten nicht geladen.

Ich habe den Quelllink für das Materialsymbol geöffnet:

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

und ich sah dieses Markup:

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  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;
}

Ich öffne den URL-Link für die woff-Schriftart https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

und laden Sie die woff2-Datei herunter.

Dann ersetze ich den woff2-Dateipfad durch den neuen in material-icons.css

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

Das macht die Sache für mich funktioniert.

Wenn Sie ein Webpack-Projekt verwenden, nach

npm install material-design-icons --save

du musst nur

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

Dies kann eine einfache Lösung sein

Holen Sie sich dieses Repository , das eine Abzweigung des ursprünglich von Google veröffentlichten Repositorys ist.

Installieren Sie es mit Laube oder npm

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

Importieren Sie die CSS-Datei auf Ihrer HTML-Seite

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

oder

<link rel="stylesheet" href="node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Test: Fügen Sie ein Symbol in das Body-Tag Ihrer HTML-Datei ein

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

Wenn Sie das Gesichtssymbol sehen, sind Sie in Ordnung.

Wenn dies nicht funktioniert, fügen Sie dies ..als Präfix zum node_modulesPfad hinzu:

<link rel="stylesheet" href="../node_modules/material-design-icons-iconfont/dist/material-design-icons.css">

Mein Rezept besteht aus drei Schritten:

1. Material-Design-Icons-Paket zu installieren

   npm install material-design-icons

2. um die Datei material-icons.css in die Datei / das Projekt .less oder .scss zu importieren

   @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

3. empfohlenen Code in die Datei / das Projekt von reactjs .js aufzunehmen

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>

Verwenden Sie material-design-icons-iconfont

Vollständige Offenlegung, ich bin der Autor dieses Pakets

Das Material-Design-Icons- Projekt von Google ist wartungsarm und für eine Weile veraltet . Es gibt eine Lücke zwischen der Version in https://material.io/icons/ und der Version in material-design-icons .

Ich habe Material-Design-Icons-Iconfont erstellt , um diese Hauptprobleme zu lösen:

• Material-Design-Icons Staus npm install- alle irrelevanten svg / xml / ... Dateien wurden entfernt
• Schriftdateien sind direkt von Google FontsCDN immer auf dem neuesten Stand
• Unterstützung für scss

Installieren über npm

npm install material-design-icons-iconfont --save

Dies hängt davon ab, wie Sie Ihre Webanwendung packen ( webpack/ gulp/ bower/ ...). Sie müssen die Datei .css/ importieren .scss(und möglicherweise den Pfad der relativen Schriftarten ändern).

Import mit SCSS

Importieren Sie in eine Ihrer Sass-Dateien

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

Verweisen Sie später auf das gewünschte Symbol <i class="material-icons">+ Symbol-ID +</i>

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

• Weitere Importmethoden finden Sie in den vollständigen Anweisungen unter material-design-icons-iconfont

Demoseite

Es wird mit einer leichten Demoseite geliefert , die das Suchen und Einfügen von Schriftarten erleichtert

Ich habe in meiner Antwort versucht, alles zu kompilieren, was für selbsthostende Symbole getan werden muss. Sie müssen diese 4 einfachen Schritte ausführen.

1. Öffnen Sie den Ordner iconfont des Materialize-Repositorys

   link- [ https://github.com/google/material-design-icons/tree/master/iconfont]

2. Laden Sie diese drei Symboldateien herunter ->

   MaterialIcons-Regular.woff2 - Format ('woff2')

   MaterialIcons-Regular.woff - Format ('woff')

   MaterialIcons-Regular.ttf - Format ('Wahrheitstyp');

   Hinweis: Nach dem Download können Sie es nach Belieben umbenennen.

3. Gehen Sie jetzt zu Ihrem CSS und fügen Sie diesen Code hinzu

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Hinweis: Die in src: url (...) angegebene Adresse sollte sich auf die 'CSS-Datei' und nicht auf die Datei index.html beziehen. Zum Beispiel kann es src: url sein (../ myicons / MaterialIcons-Regular.woff2)

4. Sie können es jetzt verwenden und hier erfahren Sie, wie dies in HTML durchgeführt werden kann

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

Klicken Sie hier , um alle Symbole anzuzeigen, die verwendet werden können.

Nachdem Sie dies getan haben npm install material-design-icons, fügen Sie dies in Ihre CSS-Hauptdatei ein:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  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;

  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

Mit eckigem Cli

npm install angular-material-icons --save

oder

npm install material-design-icons-iconfont --save

material-design-icons-iconfont ist die neueste aktualisierte Version der Symbole. Winkel-Material-Symbole werden seit langem nicht mehr aktualisiert

Warten Sie, warten Sie, warten Sie, bis die Installation abgeschlossen ist, und fügen Sie sie dann zu angle.json -> Projekte -> Architekt -> Stile hinzu

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

oder wenn Sie material-desing-icons-iconfont installiert haben

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

2019 Update hier:

Um Ihre Material-Symbole selbst zu hosten, die regulären, abgerundeten, scharfen, alle Varianten. Holen Sie sie sich aus diesem Repo: https://github.com/petergng/material-icon-font

Aus irgendeinem Grund weiß ich nicht, warum diese Schriftarten über Google-Repositorys nicht leicht zugänglich sind.

Aber los geht's.

Gehen Sie nach dem Herunterladen des Pakets in den Ordner bin und Sie sehen die vier Varianten. Natürlich liegt es an Ihnen, was auch immer zu verwenden.

Um sie zu verwenden, erstellen Sie eine CSS-Datei und

1. Generieren Sie für jede benötigte Variante eine Schriftart:

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/regular/Material-Icons-Regular.eot); /* For IE6-8 */
    src: local('Material-Icons-Regular'),
    url(./icons/regular/Material-Icons-Regular.woff2) format('woff2'),
    url(./icons/regular/Material-Icons-Regular.woff) format('woff'),
    url(./icons/regular/Material-Icons-Regular.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Round';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/round/Material-Icons-Round.eot); /* For IE6-8 */
    src: local('Material-Icons-Round'),
    url(./icons/round/Material-Icons-Round.woff2) format('woff2'),
    url(./icons/round/Material-Icons-Round.woff) format('woff'),
    url(./icons/round/Material-Icons-Round.svg) format('svg'),
    url(./icons/round/Material-Icons-Round.ttf) format('truetype');
}

@font-face {
    font-family: 'Material Icons Sharp';
    font-style: normal;
    font-weight: 400;
    src: url(./icons/sharp/Material-Icons-Sharp.eot); /* For IE6-8 */
    src: local('Material-Icons-Sharp'),
    url(./icons/sharp/Material-Icons-Sharp.woff2) format('woff2'),
    url(./icons/sharp/Material-Icons-Sharp.woff) format('woff'),
    url(./icons/sharp/Material-Icons-Sharp.svg) format('svg'),
    url(./icons/sharp/Material-Icons-Sharp.ttf) format('truetype');
}

Der urlLink verweist auf die Position der Symbole in Ihrem Projekt.

2. Jetzt können Sie die Symbolklassen registrieren:

.material-icons-outlined, .material-icons {
    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;
}

Dadurch verwenden beide .material-icons-outlined, und .material-iconsKlassen dieselben Standardeinstellungen. Wenn Sie verwenden möchten .material-icons-sharp, hängen Sie es einfach an die beiden Klassennamen an.

3. Lassen Sie uns abschließend die Schriftart einstecken, die Sie aus Schritt 1 gezogen haben.

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

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

Um mehr Varianten wie Sharp zu verwenden, fügen Sie einfach den Block wie die beiden oben hinzu.

Sobald Sie fertig sind, gehen Sie zu Ihrem HTML-Code und verwenden Sie Ihre neu geprägten Symbole.

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

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

Unter http://materialize.com/icons.html, den Stilheaderinformationen, die Sie auf der Seite angeben, können Sie zum eigentlichen Hyperlink gehen und lokalisierte Kopien erstellen, um Symbole offline zu verwenden.

Hier ist wie.NB: Sie werden zwei Dateien in allen icon.css und somefile.woff herunterladen .

1. Gehen Sie zu der folgenden URL, wie in der Kopfzeile erforderlich

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

Seite als Whatever_filename.css speichern. Standard ist icon.css

2. Suchen Sie nach einer solchen Zeile

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. Besuchen Sie die URL, die .woff beendet

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Ihr Browser lädt es automatisch herunter. Speichern Sie es in Ihrem CSS-Ordner.

4. Sie sollten jetzt die beiden Dateien icon.css und 2fcrYFNa .... mY.wof22 haben und beide in Ihrem CSS speichern. Nehmen Sie nun Änderungen an Ihrem CSS-Header-Speicherort an der icon.css in Ihren Verzeichnissen vor. Stellen Sie einfach sicher, dass sich die .woff2-Datei immer im selben Ordner wie die icon.css befindet. Fühlen Sie sich frei, die langen Dateinamen zu bearbeiten.

Die Frage Titel fragt , wie Host - Material Symbole sind offline , aber der Körper stellt klar , dass das Ziel ist, verwenden die materiellen Symbole offline (Hervorhebung von mir) .

Die Verwendung einer eigenen Kopie der Materialsymboldateien ist ein gültiger Ansatz / eine gültige Implementierung. Eine andere Möglichkeit für diejenigen, die einen Servicemitarbeiter einsetzen können, besteht darin, den Servicemitarbeiter sich darum kümmern zu lassen. Auf diese Weise müssen Sie keine Kopie erhalten und auf dem neuesten Stand halten.

Generieren Sie beispielsweise einen Servicemitarbeiter mithilfe von Workbox , verwenden Sie den einfachsten Ansatz, um workbox-cli auszuführen und die Standardeinstellungen zu akzeptieren, und hängen Sie dann den folgenden Text an den generierten Servicemitarbeiter an:

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

Sie können dann überprüfen, ob es in Chrome zwischengespeichert wurde, indem Sie F12> Anwendung> Speicher> IndexedDB verwenden, und nach einem Eintrag mit googleapis im Namen suchen.

Ab 2020 verwende ich das Material-Icons-Font- Paket. Es vereinfacht die Verwendung des Materials-Design-Icons- Pakets von Google und der Community-basierten Material-Design-Icons-Iconfont .

1. Installieren Sie das Paket. npm install material-icons-font --save

2. Fügen Sie den Pfad der CSS-Datei des Pakets zur style-Eigenschaft der angular.json-Datei Ihres Projekts hinzu.

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. Wenn Sie SCSS verwenden, kopieren Sie den Inhalt unten in Ihre Datei styles.scss.

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. Verwenden Sie die Symbole in der HTML-Datei Ihres Projekts.

   // Using icon tag
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>

Symbole von @ angle / material neigen dazu, bei der Offline-Entwicklung zu brechen. Durch Hinzufügen eines Material-Icons-Font-Pakets in Verbindung mit @ angle / material können Sie das Tag während der Offline-Entwicklung verwenden.

Installieren Sie das npm-Paket

npm install material-design-icons --save

Fügen Sie den Pfad der CSS-Datei zur Datei styles.css ein

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

Die Kaloyan Stamatov-Methode ist die beste. Gehen Sie zuerst zu https://fonts.googleapis.com/icon?family=Material+Icons . und kopieren Sie die CSS-Datei. Der Inhalt sieht so aus

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
.material-icons {
    font-family: 'Material Icons';
    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;
}

Fügen Sie die Quelle der Schriftart in den Browser ein, um die woff2-Datei https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 herunterzuladen. Ersetzen Sie dann die Datei in der ursprünglichen Quelle. Sie können es umbenennen, wenn Sie möchten. Sie müssen keine 60-MB-Datei von github herunterladen. Ganz einfach Mein Code sieht so aus

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    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;
}

während materialIcon.woff2 die heruntergeladene und ersetzte woff2-Datei ist.

npm install material-design-icons

und

@import '~material-design-icons/iconfont/material-icons.css';

arbeitete auch für mich mit Angular Material 8

Dies wurde der Webkonfiguration hinzugefügt und der Fehler wurde behoben

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

Übrigens gibt es auf youtube Videos mit Schritt-für-Schritt-Anleitungen.

https://youtu.be/7j6eOkhISzk

1. Dies sind die Schritte. Laden Sie das materialise icon-Paket von https://github.com/google/material-design-icons/releases herunter

2. Kopieren Sie den Ordner "icon-font" und benennen Sie ihn in "icons" um.

3. Öffnen Sie die Datei materialize.css und aktualisieren Sie die folgenden Pfade:

ein. von url (MaterialIcons-Regular.eot) bis url (../ fonts / MaterialIcons-Regular.eot) b. vom URL-Format (MaterialIcons-Regular.woff2) ('woff2') zum URL-Format (../ fonts / MaterialIcons-Regular.woff2) ('woff2') c. vom URL-Format (MaterialIcons-Regular.woff) ('woff') zum URL-Format (../ fonts / MaterialIcons-Regular.woff) ('woff') d. vom URL-Format (MaterialIcons-Regular.ttf) ('Truetype') zum URL-Format (../ fonts / MaterialIcons-Regular.ttf) ('Truetype')

3. Kopieren Sie die Datei materialize-icon.css in Ihren CSS-Ordner und verweisen Sie in Ihrer HTML-Datei darauf.

Alles wird wie Magie funktionieren!