Jak udostępniać ikony materiałów w trybie offline?

Przepraszam, jeśli jest to bardzo proste pytanie, ale jak używać ikon materiałów Google bez rozszerzenia

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

?

Chciałbym, aby moja aplikacja mogła wyświetlać ikony nawet wtedy, gdy użytkownik nie ma połączenia z Internetem

Metoda 2. Podręcznik programisty do samodzielnego hostowania

Pobierz najnowszą wersję z github (zasoby: plik zip), rozpakuj i skopiuj folder iconfont, zawierający pliki ikon Material Design, do swojego lokalnego projektu - https://github.com/google/material-design-icons/ wydania

Wystarczy użyć folderu iconfont z archiwum: zawiera on czcionki ikon w różnych formatach (dla obsługi wielu przeglądarek) oraz standardowy plik css.

• Zastąp źródło w atrybucie url @ font-face względną ścieżką do folderu iconfont w twoim lokalnym projekcie (gdzie znajdują się pliki czcionek) np. 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>

Pakiety NPM / Bower

Google oficjalnie ma opcję zależności Bower i NPM - postępuj zgodnie z Przewodnikiem po ikonach materiałów 1

Korzystanie z altany :bower install material-design-icons --save

Korzystanie z NPM :npm install material-design-icons --save

Material Icons : Alternatywnie spójrz na czcionkę ikony Material Design i strukturę CSS, aby samodzielnie hostować ikony, z https://marella.me/material-icons/ @ marella.

Uwaga

Wygląda na to, że Google ma projekt w trybie niewielkiej konserwacji. Ostatnie wydanie było w chwili pisania tego tekstu 3 lata temu!

Jest kilka problemów w GitHub dotyczących tego, ale chciałbym odnieść się do komentarza @cyberalien na temat problemu, w Is this project actively maintained? #951którym odnosi się on do kilku projektów społeczności, które rozwidliły i nadal utrzymują ikony materiałów.

Tworzę dla Angular 4/5 i często pracuję w trybie offline, więc poniższe rozwiązania zadziałały. Najpierw zainstaluj NPM:

npm install material-design-icons --save

Następnie dodaj do styles.css:

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

U mnie górne podejścia nie działają. Ściągam pliki z github, ale przeglądarka nie załadowała czcionek.

Co zrobiłem, to otworzyłem link do źródła ikony materiału:

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

i zobaczyłem ten znacznik:

    /* 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;
}

Otwieram link do adresu URL czcionki woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

i pobierz plik woff2.

Następnie zastępuję ścieżkę do pliku woff2 nową w 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');
}

To sprawia, że ​​coś mi pasuje.

Jeśli używasz projektu webpack, po

npm install material-design-icons --save

po prostu musisz

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

To może być łatwe rozwiązanie

Pobierz to repozytorium, które jest rozwidleniem oryginalnego repozytorium opublikowanego przez Google.

Zainstaluj go za pomocą altany lub npm

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

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

Zaimportuj plik css na swoją stronę HTML

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

lub

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

Test: dodaj ikonę wewnątrz tagu body w pliku HTML

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

Jeśli widzisz ikonę twarzy, wszystko jest w porządku.

Jeśli nie zadziała, spróbuj dodać ten ..prefiks do node_modulesścieżki:

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

Mój przepis składa się z trzech kroków:

1. aby zainstalować pakiet Material-Design-Icons

   npm install material-design-icons

2. aby zaimportować plik material-icons.css do pliku / projektu .less lub .scss

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

3. aby dołączyć zalecany kod do pliku / projektu reactjs .js

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

Użyj czcionki material-design-icons-iconfont

Pełne ujawnienie, jestem autorem tego pakietu

Projekt Google Material-Design-Icons jest tani w utrzymaniu i od jakiegoś czasu jest nieaktualny . Istnieje luka między wersją w https://material.io/icons/ a wersją w material-design-icons .

Stworzyłem material-design-icons-iconfont, aby rozwiązać te główne problemy:

• Material-design-icons zacina się npm install- wszystkie nieistotne pliki svg / xml / ... zostały usunięte
• Pliki czcionek są zawsze aktualne prosto z Google FontsCDN
• Wsparcie dla scss

Zainstaluj przez npm

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

Zależy to od tego, jak spakujesz swoją aplikację internetową ( webpack/ gulp/ bower/ ...), musisz zaimportować plik .css/ .scss(i możesz zmienić względną ścieżkę czcionek)

Importuj przy użyciu SCSS

Zaimportuj do jednego ze swoich plików sass

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

Później odwołaj się do wybranej ikony <i class="material-icons">+ id-ikony +</i>

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

• przeczytaj pełne instrukcje dotyczące material-design-icons-iconfont, aby poznać więcej metod importowania

Strona demonstracyjna

Zawiera lekką stronę demonstracyjną, która ułatwia wyszukiwanie i kopiowanie i wklejanie czcionek

W mojej odpowiedzi próbowałem skompilować wszystko, co należy zrobić, aby ikony samodzielnego hostingu. Musisz wykonać te 4 proste kroki.

1. Otwórz folder iconfont repozytorium materialize

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

2. Pobierz te trzy pliki ikon ->

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

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

   MaterialIcons-Regular.ttf - format ('truetype');

   Uwaga - po pobraniu możesz zmienić jego nazwę na dowolną.

3. Teraz przejdź do swojego CSS i dodaj ten kod

@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';
}

Uwaga: adres podany w src: url (...) powinien odnosić się do „pliku CSS”, a nie do pliku index.html. Na przykład może to być src: url (../ myicons / MaterialIcons-Regular.woff2)

4. Jesteś teraz gotowy do użycia i oto jak można to zrobić w HTML

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

Kliknij tutaj, aby zobaczyć wszystkie ikony, których można użyć.

Po zakończeniu npm install material-design-iconsdodaj to w swoim głównym pliku CSS:

@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';
}

Z kątowym zaciskiem

npm install angular-material-icons --save

lub

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

material-design-icons-iconfont to najnowsza zaktualizowana wersja ikon. ikony angular-material-icons nie są aktualizowane przez długi czas

Poczekaj poczekaj poczekaj, aż instalacja zostanie zakończona, a następnie dodaj ją do angular.json -> projects -> architect -> styles

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

lub jeśli zainstalowałeś wtedy material-desing-icons-iconfont

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

Aktualizacja 2019 tutaj:

Aby samodzielnie hostować ikony materiałów, zwykłe, zaokrąglone, ostre, wszystkie warianty. Zdobądź je z tego repozytorium: https://github.com/petergng/material-icon-font

Z jakiegoś powodu nie wiem, dlaczego te czcionki nie są łatwo dostępne w repozytoriach Google.

Ale proszę bardzo.

Po pobraniu pakietu przejdź do folderu bin, a zobaczysz cztery warianty. Oczywiście wybór należy do Ciebie.

Aby z nich skorzystać, utwórz plik css i

1. Wygeneruj krój czcionki dla każdego potrzebnego wariantu:

@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');
}

urlBędzie link do miejsca, gdzie znajdują się ikony w swoim projekcie.

2. Teraz zarejestrujmy klasy ikon:

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

Spowoduje to, że obie .material-icons-outlined, i .material-iconsklasy będą używać tych samych wartości domyślnych. Jeśli chcesz użyć .material-icons-sharp, po prostu dodaj go do dwóch nazw klas.

3. Na koniec pozwól nam podłączyć krój czcionki pobrany w kroku 1.

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

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

Ponownie, aby użyć więcej wariantów, takich jak Sharp, po prostu dodaj jego blok, tak jak dwa powyżej.

Po zakończeniu ... przejdź do swojego HTML i użyj nowo wybitych ikon.

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

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

Pod adresem http://materialize.com/icons.html informacji w nagłówku stylu, które umieszczasz na stronie, możesz przejść do rzeczywistego hiperłącza i wykonać zlokalizowane kopie, aby używać ikon w trybie offline.

Oto instrukcja. Uwaga: pobierzesz dwa pliki we wszystkich plikach icon.css i somefile.woff .

1. Przejdź do następującego adresu URL zgodnie z wymaganiami w nagłówku

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

Zapisz stronę jako cokolwiek_nazwa_pliku.css. Domyślnie jest to icon.css

2. Poszukaj takiej linii

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

3. Odwiedź adres URL z końcówką .woff

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Twoja przeglądarka automatycznie go pobierze. Zapisz go w swoim folderze CSS.

4. Powinieneś teraz mieć dwa pliki icon.css i 2fcrYFNa .... mY.wof22 , zapisz je oba w swoim css. Teraz wprowadź zmiany w lokalizacji swojego nagłówka css w pliku icon.css w swoich katalogach. Upewnij się tylko, że plik .woff2 znajduje się zawsze w tym samym folderze co plik icon.css. Możesz edytować długie nazwy plików.

Tytuł pytania pyta, jak hostować ikony materiałów w trybie offline, ale treść wyjaśnia, że ​​celem jest użycie ikon materiałów w trybie offline (wyróżnienie moje) .

Używanie własnej kopii plików ikon materiałów jest prawidłowym podejściem / implementacją. Innym, dla tych, którzy mogą skorzystać z usług pracownika, jest pozwolenie mu się tym zająć. W ten sposób nie musisz mieć kłopotów z uzyskaniem kopii i aktualizowaniem jej.

Na przykład, wygeneruj pracownika serwisu za pomocą Workboxa , używając najprostszej metody polegającej na uruchomieniu workbox-cli i zaakceptowaniu ustawień domyślnych, a następnie dołącz następujący tekst do wygenerowanego elementu Service Worker:

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

Następnie możesz sprawdzić, czy został zapisany w pamięci podręcznej w Chrome, używając F12> Aplikacja> Pamięć> IndexedDB i poszukaj wpisu z googleapis w nazwie.

Od 2020 roku moje podejście polega na używaniu pakietu material-icons-font . Upraszcza korzystanie z pakietu material-design-icons firmy Google i opartej na społeczności czcionek material-design-icons-iconfont .

1. Zainstaluj pakiet. npm install material-icons-font --save

2. Dodaj ścieżkę do pliku CSS pakietu do właściwości style pliku angular.json projektu.

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

3. Jeśli używasz SCSS, skopiuj poniższą zawartość na górę pliku 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. Użyj ikon w pliku HTML swojego projektu.

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

Ikony z @ angular / material mają tendencję do zrywania podczas programowania offline. Dodanie pakietu material-icons-font w połączeniu z @ angular / material umożliwia używanie tagu podczas programowania offline.

Zainstaluj pakiet npm

npm install material-design-icons --save

Umieść ścieżkę do pliku css do pliku styles.css

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

Najlepsza jest metoda Kaloyana Stamatova. Najpierw przejdź do https://fonts.googleapis.com/icon?family=Material+Icons . i skopiuj plik css. treść wygląda tak

/* 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;
}

Wklej źródło czcionki do przeglądarki, aby pobrać plik woff2 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Następnie zamień plik w oryginalnym źródle. Możesz zmienić jego nazwę, jeśli chcesz. Nie ma potrzeby pobierania pliku 60 MB z github. Dead simple Mój kod wygląda tak

@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;
}

podczas gdy materialIcon.woff2 jest pobranym i zastąpionym plikiem woff2.

npm install material-design-icons

i

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

pracował również dla mnie z Angular Material 8

Dodano to do konfiguracji internetowej i błąd zniknął

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

Nawiasem mówiąc, na youtube jest dostępny film z instrukcjami krok po kroku.

https://youtu.be/7j6eOkhISzk

1. Oto kroki. Pobierz pakiet ikon materialize ze strony https://github.com/google/material-design-icons/releases

2. Skopiuj folder icon-font i zmień jego nazwę na icons.

3. Otwórz plik materialize.css i zaktualizuj następujące ścieżki:

za. z url (MaterialIcons-Regular.eot) do url (../ fonts / MaterialIcons-Regular.eot) b. z formatu url (MaterialIcons-Regular.woff2) ('woff2') do formatu url (../ fonts / MaterialIcons-Regular.woff2) ('woff2') c. z formatu url (MaterialIcons-Regular.woff) ('woff') do formatu url (../ fonts / MaterialIcons-Regular.woff) ('woff') d. z formatu url (MaterialIcons-Regular.ttf) („truetype”) do formatu url (../ fonts / MaterialIcons-Regular.ttf) („truetype”)

3. Skopiuj materialize-icon.css do swojego folderu css i umieść w nim odniesienie w pliku html.

Wszystko będzie działać jak magia!