Bagaimana cara menghosting ikon material secara offline?

Saya minta maaf jika ini adalah pertanyaan yang sangat sederhana, tapi bagaimana Anda menggunakan ikon material google tanpa

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

?

Saya ingin aplikasi saya dapat menampilkan ikon meskipun pengguna tidak memiliki koneksi internet

Metode 2. Panduan Pengembang Hosting Sendiri

Unduh rilis terbaru dari github (aset: file zip), unzip, dan salin folder iconfont, yang berisi file ikon desain material, ke dalam proyek lokal Anda - https://github.com/google/material-design-icons/ rilis

Anda hanya perlu menggunakan folder iconfont dari arsip: ini berisi font ikon dalam format yang berbeda (untuk dukungan beberapa browser) dan css boilerplate.

• Ganti sumber di atribut url @ font-face, dengan jalur relatif ke folder iconfont di proyek lokal Anda, (di mana file font berada) mis. 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>

Paket NPM / Bower

Google secara resmi memiliki opsi ketergantungan Bower dan NPM - ikuti Panduan Ikon Material 1

Menggunakan bower :bower install material-design-icons --save

Menggunakan NPM :npm install material-design-icons --save

Ikon Material : Atau lihat font ikon desain Material dan kerangka kerja CSS untuk menghosting ikon sendiri, dari https://marella.me/material-icons/ @ marella

Catatan

Sepertinya Google memiliki proyek dalam mode pemeliharaan rendah. Rilis terakhir adalah, pada saat penulisan, 3 tahun yang lalu!

Ada beberapa masalah di GitHub terkait hal ini, tetapi saya ingin merujuk ke komentar @cyberalien tentang masalah Is this project actively maintained? #951yang merujuk pada beberapa proyek komunitas yang bercabang dan terus mempertahankan ikon material.

Saya membangun untuk Angular 4/5 dan sering bekerja secara offline dan berikut ini yang berhasil untuk saya. Pertama instal NPM:

npm install material-design-icons --save

Kemudian tambahkan berikut ini ke styles.css:

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

Pendekatan atas tidak berhasil untuk saya. Saya mengunduh file dari github, tetapi browser tidak memuat font.

Yang saya lakukan adalah membuka tautan sumber ikon material:

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

dan saya melihat markup ini:

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

Saya membuka tautan url font woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

dan unduh file woff2.

Kemudian saya mengganti jalur file woff2 dengan yang baru di 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');
}

Itu membuat segalanya bekerja untuk saya.

Jika Anda menggunakan proyek webpack, setelah

npm install material-design-icons --save

kamu hanya perlu

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

Ini mungkin Solusi yang mudah

Dapatkan repositori ini yang merupakan cabang dari repositori asli yang diterbitkan Google.

Instal dengan bower atau npm

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

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

Impor File css di Halaman HTML Anda

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

atau

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

Tes: Tambahkan ikon di dalam tag tubuh File HTML Anda

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

Jika Anda melihat ikon wajah, Anda baik-baik saja.

Jika tidak berhasil, coba tambahkan ini ..sebagai awalan ke node_modulesjalur:

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

Resep saya memiliki tiga langkah:

1. untuk memasang paket material-design-icons

   npm install material-design-icons

2. untuk mengimpor file material-icons.css ke dalam file / proyek .less atau .scss

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

3. untuk memasukkan kode yang direkomendasikan ke dalam file / proyek reactjs .js

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

Gunakan material-design-icons-iconfont

Pengungkapan penuh, saya pembuat paket ini

Proyek ikon-desain-material Google sedang dalam perawatan rendah dan ketinggalan zaman untuk sementara waktu . Ada celah antara versi di https://material.io/icons/ dan versi di ikon-desain material .

Saya telah membuat material-design-icons-iconfont untuk mengatasi masalah-masalah utama ini:

• material-design-icons jams npm install- semua file svg / xml / ... yang tidak relevan telah dihapus
• File font selalu up-to-date langsung dari Google FontsCDN
• Dukungan untuk scss

Instal melalui npm

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

Itu tergantung pada bagaimana Anda mengemas aplikasi web Anda ( webpack/ gulp/ bower/ ...), Anda harus mengimpor .css/ .scssfile (dan mungkin mengubah jalur font relatif)

Impor Menggunakan SCSS

Impor di salah satu file sass Anda

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

Nanti, rujuk ikon yang Anda inginkan <i class="material-icons">+ icon-id +</i>

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

• baca instruksi lengkap tentang material-design-icons-iconfont untuk metode impor lainnya

Halaman demo

Muncul dengan halaman demo ringan untuk membantu pencarian dan copy-paste font

Saya telah mencoba mengumpulkan semua yang perlu dilakukan untuk ikon hosting mandiri dalam jawaban saya. Anda perlu mengikuti 4 langkah sederhana ini.

1. Buka folder iconfont dari repositori materialize

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

2. Unduh tiga file ikon ini ->

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

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

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

   Catatan- Setelah Mengunduh Anda dapat mengubah namanya menjadi apa pun yang Anda suka.

3. Sekarang, buka CSS Anda dan tambahkan kode ini

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

Catatan: Alamat yang diberikan di src: url (...) harus berkaitan dengan 'File CSS' dan bukan file index.html. Misalnya bisa menjadi src: url (../ myicons / MaterialIcons-Regular.woff2)

4. Anda siap untuk menggunakan sekarang dan berikut ini cara melakukannya dalam HTML

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

Klik di sini untuk melihat semua ikon yang dapat digunakan.

Setelah Anda selesai npm install material-design-icons, tambahkan ini di file CSS utama Anda:

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

Dengan cli sudut

npm install angular-material-icons --save

atau

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

material-design-icons-iconfont adalah versi terbaru dari ikon. ikon-material-sudut tidak diperbarui untuk waktu yang lama

Tunggu tunggu, tunggu instal selesai lalu tambahkan ke angular.json -> proyek -> arsitek -> gaya

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

atau jika Anda menginstal material-desing-icons-iconfont lalu

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

Pembaruan 2019 di sini:

Untuk menghosting sendiri ikon material Anda, yang Reguler, Bulat, Tajam, semua varian. Dapatkan mereka dari repo ini: https://github.com/petergng/material-icon-font

Untuk beberapa alasan saya tidak tahu mengapa font ini tidak dapat diakses dengan mudah dari repositori Google.

Tapi ini dia.

Setelah mengunduh paket, buka folder bin dan Anda akan melihat empat varian. Tentu saja, terserah Anda untuk menggunakan yang mana saja.

Untuk menggunakannya, buat file css dan

1. Hasilkan bentuk font untuk setiap varian yang Anda butuhkan:

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

The urlakan link ke mana ikon yang terletak di proyek Anda.

2. Sekarang mari kita daftarkan kelas 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;
}

Ini akan membuat kedua kelas .material-icons-outlined, dan .material-iconskelas menggunakan default yang sama. Jika Anda ingin menggunakan .material-icons-sharp, tambahkan saja ke dua nama kelas.

3. Terakhir, izinkan kami memasukkan tampilan font yang Anda tarik dari langkah 1.

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

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

Sekali lagi, untuk menggunakan lebih banyak varian, seperti Sharp, tambahkan saja bloknya seperti dua di atas.

Setelah selesai ... buka html Anda dan gunakan ikon yang baru dibuat.

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

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

Di http://materialize.com/icons.html informasi header gaya yang Anda sertakan di halaman, Anda dapat membuka Hyperlink yang sebenarnya dan membuat salinan yang dilokalkan untuk menggunakan ikon secara offline.

Begini caranya.NB: Anda akan mengunduh dua File di semua icon.css dan somefile.woff .

1. Buka URL berikut seperti yang diperlukan di header

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

Simpan halaman sebagai nama_filen apa pun.css. Default-nya adalah icon.css

2. Cari garis seperti ini

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

3. Kunjungi URL yang diakhiri dengan .woff

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Browser Anda akan mendownloadnya secara otomatis. Simpan di folder CSS Anda.

4. Anda sekarang harus memiliki dua file icon.css dan 2fcrYFNa .... mY.wof22 , simpan keduanya di css Anda. Sekarang edit di lokasi css header Anda ke icon.css di direktori Anda. Pastikan file .woff2 selalu ada di folder yang sama dengan icon.css. Jangan ragu untuk mengedit nama file yang panjang.

Judul pertanyaan menanyakan bagaimana menjadi tuan rumah ikon material secara offline tetapi isi menjelaskan bahwa tujuannya adalah untuk menggunakan ikon material secara offline (penekanan saya) .

Menggunakan salinan file ikon material Anda sendiri adalah pendekatan / implementasi yang valid. Lain, bagi mereka yang bisa menggunakan pekerja layanan adalah membiarkan service worker yang menanganinya. Dengan begitu Anda tidak perlu repot mendapatkan salinannya dan selalu memperbaruinya.

Misalnya, buat pekerja layanan menggunakan Workbox , menggunakan pendekatan paling sederhana untuk menjalankan workbox-cli dan menerima default, lalu tambahkan teks berikut ke pekerja layanan yang dihasilkan:

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

Anda kemudian dapat memeriksa apakah itu di-cache di Chrome menggunakan F12> Aplikasi> Penyimpanan> IndexedDB dan mencari entri dengan googleapis di namanya.

Pada tahun 2020, pendekatan saya adalah menggunakan paket material-icons-font . Ini menyederhanakan penggunaan paket ikon-desain-material Google dan font-desain-ikon-ikon berbasis komunitas .

1. Instal paketnya. npm install material-icons-font --save

2. Tambahkan jalur file CSS paket ke properti style file angular.json proyek Anda.

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

3. Jika menggunakan SCSS, salin konten di bawah ke bagian atas file styles.scss Anda.

   @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. Gunakan ikon di file HTML proyek Anda.

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

Ikon dari @ angular / material cenderung rusak saat dikembangkan secara offline. Menambahkan paket material-icons-font dalam hubungannya dengan @ angular / material memungkinkan Anda menggunakan tag saat mengembangkan secara offline.

Instal paket npm

npm install material-design-icons --save

Letakkan jalur file css ke file styles.css

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

Metode Kaloyan Stamatov adalah yang terbaik. Pertama, buka https://fonts.googleapis.com/icon?family=Material+Icons . dan salin file cssnya. kontennya terlihat seperti ini

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

Tempel sumber font ke browser untuk mengunduh file woff2 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Kemudian ganti file di sumber aslinya. Anda dapat mengganti namanya jika Anda mau. Tidak perlu mengunduh file 60MB dari github. Sangat sederhana Kode saya terlihat seperti ini

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

sedangkan materialIcon.woff2 adalah file woff2 yang diunduh dan diganti.

npm install material-design-icons

dan

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

bekerja juga untuk saya dengan Angular Material 8

Menambahkan ini ke konfigurasi web dan kesalahannya hilang

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

Ngomong-ngomong, ada video yang tersedia di youtube dengan petunjuk langkah demi langkah.

https://youtu.be/7j6eOkhISzk

1. Inilah langkah-langkahnya. Unduh paket ikon mewujudkan dari https://github.com/google/material-design-icons/releases

2. Salin folder ikon-font dan ubah namanya menjadi ikon.

3. Buka file materialize.css dan perbarui jalur berikut:

Sebuah. dari url (MaterialIcons-Regular.eot) ke url (../ font / MaterialIcons-Regular.eot) b. dari format url (MaterialIcons-Regular.woff2) ('woff2') ke format url (../ font / MaterialIcons-Regular.woff2) ('woff2') c. dari format url (MaterialIcons-Regular.woff) ('woff') ke format url (../ font / MaterialIcons-Regular.woff) ('woff') d. dari format url (MaterialIcons-Regular.ttf) ('truetype') ke format url (../ font / MaterialIcons-Regular.ttf) ('truetype')

3. Salin materialize-icon.css ke folder css Anda dan referensikan di file html Anda.

Semuanya akan bekerja seperti sulap!