Wie kann ich Materialsymbole offline hosten?

106

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

Luke Tan
quelle
Dieser Artikel erklärt für Angular, Gedanken könnten für jemanden hilfreich sein, thecodeframework.com/…
Gagan

Antworten:

112

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.


bfmags
quelle
Wie würden Sie dies für eine Telefon-GAP-App tun, für die Sie keine Domain hätten?
Luke Tan
ziele auf deinen lokalen Ordner in der Quell-URL von @ font-face: url ("iconfont / MaterialIcons-Regular.woff2" - aktualisierte Antwort
bfmags
Hey, kannst du bitte eine aktualisierte Antwort darauf geben? Ich habe meine MDL-Symbole mit npm heruntergeladen.
TheBAST
1
Mein Problem wurde gelöst… Ich wollte nur darauf hinweisen, dass wir nur den iconfontOrdner aus dem gesamten Archiv benötigen .
Securecurve
Für diese Art von "Verschieben von CDN-Ressourcen, die lokal bereitgestellt werden sollen" würde es sich normalerweise auszahlen, vor und nach der Änderung solide Daten zur durchschnittlichen Antwortzeit von über 3000 Anfragen zu haben - Sie wären überrascht, wie oft es sich nicht lohnt, unabhängig davon Ihre Bemühungen, um es zu erreichen ...
Yordan Georgiev
36

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';
Richard Bown
quelle
10
beim Aufruf "npm install" warten warten warten lol ... aber funktioniert nach langer Zeit
Sergio Cabral
2
@SergioCabral Zum Glück haben Sie den Kommentar zum Warten abgegeben, denn es gab ungefähr 5 Mal, dass ich dachte, diese Installation würde nirgendwo hingehen ... :)
Alfa Bravo
1
Danke, dass ich es geliebt habe. Dies ist die beste Lösung. Danke <3
Ali Jamal
Ich
arbeite
3
Haben Sie eine Idee, wie Sie umrissene Symbole hinzufügen können?
Wutzebaer
20

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.

Kaloyan Stamatov
quelle
Vielen Dank! Ich hatte das gleiche Problem und dies hat es für mich behoben.
David
Ich löse mein Problem mit diesem Ansatz, aber später fand ich ein anderes Git-Repo, von dem ich die richtige Veröffentlichung bekomme.
Kaloyan Stamatov
@ Kaloyan Stamatov wäre schön, dieses Git Repo zu teilen .. da viele Leute Probleme mit veralteten offiziellen Repo haben :)
Grashopper
@Grashopper, ich habe es nicht mehr. Entschuldigung
Kaloyan Stamatov
1
2019 auf dem neuesten Stand, funktionierte diese Lösung auch für mich.
Compt
17

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'
Vladislav Kosovskikh
quelle
7
Ich empfehle dies nicht, dieses Repo ist viel zu groß, benutze einen Desc. unter npmjs.com/package/material-design-icons-iconfont Ich habe auch festgestellt, dass der Browser fonts.googleapis.com/icon?family=Material+Icons zwischenspeichert und im Offline-Modus funktioniert. Kasse keemor.github.io/#
keemor
Ich bin Neuling in npm können Sie näher erläutern import materialIcons from 'material-design-icons/iconfont/material-icons.css'. Fügen wir diese Zeile zu wo hinzu? app.js oder woanders. Ich verwende Framework7 mit Vue und habe es versucht. Bei mir hat es nicht funktioniert.
Suat Atan PhD
@SuatAtanPhD Sie fügen diesen Import wie alle anderen Stilimporte hinzu. Wenn Sie ein Webpack verwenden, benötigen Sie so etwas wie Style-Loader, CSS-Loader und können diesen Import an einer beliebigen Stelle in Ihrem JS-Code platzieren, z. B. in index.js oder app.js usw.
Vladislav Kosovskikh
1
Ein solcher Ansatz wird für die
Erstellung
13

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">
Md. Harun oder Rashid
quelle
Die Verwendung des Pakets material-design-icons-iconfont funktioniert auch mit der Standardkomponente von Angular mat-icon. Somit ist der Übergang nahtlos.
Yuri
Dies ist die Lösung, die für mich funktioniert hat, außer dass der Stylesheet-Link in index.html nicht funktioniert hat - ich musste einen Import in meine Styles.scss-Datei einfügen: @import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css"; Dann sprangen meine lokal gehosteten Symbole ins Leben
Ade
7

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>
römisch
quelle
Dieses Paket existiert nicht mehr
yehonatan yehezkel
Mit Angular Cli installiere npm Material-Design-Icons und füge dann CSS in Angular.Json -> Architect-> Build-> Styles
Wlada
6

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>

Demoseite

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

Bild

Jossef Harush
quelle
1
Ich habe ein Problem mit PWA. Die Symbole funktionieren, während Sie sich im Browser befinden. Sobald Sie jedoch eine Verknüpfung auf dem Startbildschirm hinzufügen und ausführen, werden die App-Symbole nicht angezeigt.
Wlada
4

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)


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

abhinav1602
quelle
404 auf Ihrem Link
Welyngton Dal Prá
3

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';
}
Manolo Alvarez
quelle
3

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"
            ],
Wlada
quelle
3

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.

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

  1. 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>
Wale
quelle
2

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

  1. Suchen Sie nach einer solchen Zeile

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

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

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

Joseph Quaye
quelle
2

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.

Joseph Simpson
quelle
Ich habe das auch mit ein paar kleinen Änderungen zum Laufen gebracht. Ich habe "workboxSW" in "workbox" geändert. Ich habe "Router" in "Routing" geändert und diesen Code in meine Datei "sw_config.js" eingefügt, die bei Verwendung des Workbox-CLI-Assistenten generiert wird.
Jason Allshorn
2

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.

HelloWorldPeace
quelle
0

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";
Ahmet Arslan
quelle
0

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.

chris_wire
quelle
1
Funktioniert nicht in allen Browsern. Weitere Informationen finden Sie in dieser SO-Antwort: stackoverflow.com/questions/11002820/…
xaviert
-1
npm install material-design-icons

und

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

arbeitete auch für mich mit Angular Material 8

Seite105
quelle
-1

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>
tfa
quelle
-1

Ü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')

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

Alles wird wie Magie funktionieren!

SicMundus
quelle