Bagaimana cara menghosting ikon material secara offline?


106

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


Artikel ini menjelaskan untuk Angular, pemikiran mungkin bermanfaat bagi seseorang, thecodeframework.com/…
Gagan

Jawaban:


112

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.



Bagaimana Anda melakukan ini untuk aplikasi telepon GAP yang tidak memiliki domain?
Luke Tan

targetkan folder lokal Anda di url sumber @ font-face: url ("iconfont / MaterialIcons-Regular.woff2" - jawaban yang diperbarui
bfmags

Hai, Bisakah Anda membuat jawaban yang diperbarui untuk ini. Saya telah mengunduh ikon mdl saya dengan npm.
TheBAST

1
Memecahkan masalah saya… Saya hanya ingin mencatat bahwa kami hanya memerlukan iconfontfolder dari seluruh arsip.
securecurve

untuk jenis "pindahkan sumber daya cdn untuk disajikan secara lokal" biasanya akan bermanfaat jika memiliki lebih dari 3000 permintaan data waktu respons rata-rata SEBELUM dan SETELAH perubahan - Anda akan terkejut betapa sering tidak sepadan, terlepas dari usaha Anda untuk mencapainya ...
Yordan Georgiev

37

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

10
ketika panggilan "npm install" tunggu tunggu tunggu lol ... tetapi berfungsi setelah waktu yang lama
Sergio Cabral

2
@SergioCabral Untungnya Anda membuat komentar tentang menunggu, karena ada sekitar 5 kali saya pikir pemasangan ini tidak akan berhasil ... :)
Alfa Bravo

1
Terima Kasih Menyukainya Ini Solusi Terbaik Terima Kasih <3
Ali Jamal

Bekerja untuk saya juga ... :)
Aupr

3
tahu bagaimana menambahkan ikon yang digariskan?
wutzebaer

20

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.


Terima kasih! Saya memiliki masalah yang sama dan ini memperbaikinya untuk saya.
David

Saya menyelesaikan masalah saya dengan pendekatan ini, tetapi kemudian saya menemukan repo git lain, dari mana saya mendapatkan rilis yang tepat.
Kaloyan Stamatov

@ Kaloyan Stamatov akan senang untuk membagikan repo git itu .. karena banyak orang memiliki masalah dengan repo resmi yang sudah ketinggalan zaman :)
Grashopper

@Grashopper, saya tidak memilikinya lagi. Maaf
Kaloyan Stamatov

1
lebih mutakhir di tahun 2019, solusi ini juga berhasil untuk saya.
compt

17

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'

7
Saya tidak menyarankan melakukan ini, repo ini terlalu besar, gunakan satu desc. di bawah npmjs.com/package/material-design-icons-iconfont Saya juga melihat bahwa browser akan menyimpan cache fonts.googleapis.com/icon?family=Material+Icons dan akan bekerja dalam mode offline. Lihat keemor.github.io/#
keemor

Saya pemula di npm, bisakah Anda menjelaskan import materialIcons from 'material-design-icons/iconfont/material-icons.css'. Kami menambahkan baris ini ke mana? app.js atau di tempat lain. Saya menggunakan framework7 dengan Vue dan saya mencoba. Itu tidak berhasil untuk saya.
Suat Atan PhD

@SuatAtanPhD Anda menambahkan impor ini seperti impor gaya lainnya. Jika Anda menggunakan webpack, Anda memerlukan sesuatu seperti style-loader, css-loader dan Anda dapat menempatkan impor ini di mana saja di kode js Anda, misalnya di index.js atau app.js dll.
Vladislav Kosovskikh

1
Pendekatan seperti itu direkomendasikan untuk membangun aplikasi web perusahaan yang dapat bekerja di jaringan internal tanpa akses ke Internet
Yurii Bratchuk

13

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

Menggunakan paket material-design-icons-iconfont bekerja bahkan dengan mat-iconkomponen standar Angular . Dengan demikian transisi berjalan mulus.
Yuri

Ini adalah solusi yang berhasil untuk saya, kecuali tautan stylesheet di index.html tidak berfungsi - saya harus menambahkan impor ke file Styles.scss saya: @import"../node_modules/material-design-icons-iconfont/dist/material-design-icons.css"; Kemudian ikon yang dihosting secara lokal langsung hidup
Ade

7

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>

paket ini tidak ada lagi
yehonatan yehezkel

dengan angular cli, lakukan npm install material-design-icons dan kemudian tambahkan css di angular.json -> arsitek-> build-> styles
Wlada

6

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>

Halaman demo

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

gambar


1
Saya mengalami masalah dengan PWA. Ikon berfungsi saat Anda berada di browser tetapi setelah Anda menambahkan pintasan di layar beranda dan menjalankan ikon aplikasi tidak muncul.
Wlada

4

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)


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


404 di tautan Anda
Welyngton Dal Prá

1
@ WelyngDalPrá Terima kasih. dikoreksi
abhinav1602

3

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

3

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

3

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.

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

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

2

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

  1. Cari garis seperti ini

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

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

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


2

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.


Saya mendapatkan ini untuk bekerja juga dengan beberapa perubahan kecil. Saya mengubah "workboxSW" menjadi "workbox". Saya mengubah "router" menjadi "routing" dan menambahkan kode ini ke file sw_config.js saya yang dihasilkan saat menggunakan wizard cli kotak kerja.
Jason Allshorn

2

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.


0

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

0

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.


1
Tidak berfungsi di semua browser, lihat jawaban SO ini untuk informasi lebih lanjut: stackoverflow.com/questions/11002820/…
xaviert

-1
npm install material-design-icons

dan

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

bekerja juga untuk saya dengan Angular Material 8


-1

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>

-1

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

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

Semuanya akan bekerja seperti sulap!

Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.