Bagaimana cara menggunakan tema Ikon Desain Bahan baru: Diuraikan, Bulat, Dua-Nada dan Tajam?

171

Google telah memperbarui Ikon Desain Bahannya dengan 4 tema prasetel baru:

Diuraikan, Bulat, Dua-Nada dan Tajam , selain tema Filled / Baseline biasa :

Namun, sayangnya, tidak disebutkan di mana pun bagaimana menggunakan tema baru.

Saya telah menggunakannya melalui Google Web Fonts dengan memasukkan tautan:

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

Dan kemudian menggunakan ikon yang diperlukan seperti yang disarankan dalam dokumentasi :

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

Tetapi selalu menunjukkan versi 'Filled / Baseline'.

Saya sudah mencoba melakukan hal berikut untuk menggunakan tema Garis Besar sebagai gantinya:

<i class="material-icons">account_balance_outlined</i>
<i class="material-icons material-icons-outlined">account_balance</i>

dan, mengubah tautan Font Web ke:

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

dll. Tapi itu tidak berhasil.

Dan tidak ada gunanya mengambil gambar dalam gelap seperti itu.

tl; dr: Apakah ada yang mencoba menggunakan tema baru? Apakah ini berfungsi seperti versi baseline (inline html tag)? Atau, apakah hanya dimaksudkan untuk diunduh sebagai format SVG atau PNG?

Terima kasih sebelumnya.

icons  material-design  google-material-icons 
— Ashil John
sumber

Jawaban:

171

Pembaruan (31/03/2019): Semua tema ikon berfungsi melalui Google Web Fonts sekarang.

Seperti yang ditunjukkan oleh Edric, itu hanya masalah menambahkan tautan font web google di kepala dokumen Anda sekarang, seperti:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Dan kemudian menambahkan kelas yang benar untuk menampilkan ikon tema tertentu.

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>

Warna ikon dapat diubah menggunakan CSS juga.

Catatan: Ikon tema Two-tone agak glitchy saat ini.

Pembaruan (14/11/2018): Daftar 16 ikon garis besar yang berfungsi dengan akhiran "_outline".

Berikut adalah daftar terbaru dari 16 ikon garis besar yang bekerja dengan Webfont-ikon Bahan biasa, menggunakan akhiran _outline (diuji dan dikonfirmasi).

(Seperti yang ditemukan pada halaman materi-desain-ikon github . Cari: " _outline_24px.svg ")

<i class="material-icons">help_outline</i> 
<i class="material-icons">label_outline</i> 
<i class="material-icons">mail_outline</i> 
<i class="material-icons">info_outline</i> 
<i class="material-icons">lock_outline</i> 
<i class="material-icons">lightbulb_outline</i> 
<i class="material-icons">play_circle_outline</i> 
<i class="material-icons">error_outline</i> 
<i class="material-icons">add_circle_outline</i> 
<i class="material-icons">people_outline</i> 
<i class="material-icons">person_outline</i> 
<i class="material-icons">pause_circle_outline</i> 
<i class="material-icons">chat_bubble_outline</i> 
<i class="material-icons">remove_circle_outline</i> 
<i class="material-icons">check_box_outline_blank</i> 
<i class="material-icons">pie_chart_outlined</i>

Perhatikan bahwa pie_chart kebutuhan untuk menjadi " pie_chart_ diuraikan " dan tidak menguraikan .

Ini adalah retasan untuk menguji tema ikon baru menggunakan inline tag. Itu bukan solusi resmi.

Sampai hari ini (19 Juli 2018), sedikit lebih dari 2 bulan sejak tema ikon baru diperkenalkan, Tidak Ada Cara untuk memasukkan ikon ini menggunakan tag inline <i class="material-icons"></i>.

+ Martin telah menunjukkan bahwa ada masalah yang diajukan pada Github mengenai hal yang sama: https://github.com/google/material-design-icons/issues/773

Jadi, sampai Google menemukan solusi untuk ini, saya mulai menggunakan peretasan untuk memasukkan tema ikon baru ini di lingkungan pengembangan saya sebelum mengunduh ikon yang sesuai seperti SVG atau PNG. Dan saya pikir saya akan membagikannya dengan Anda semua.

PENTING : Jangan gunakan ini pada lingkungan produksi karena masing-masing file CSS yang disertakan dari Google berukuran lebih dari 1MB.

Google menggunakan stylesheet ini untuk menampilkan ikon di halaman demo mereka:

Garis besar:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

Bulat:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/round.css">

Dua-nada:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/twotone.css">

Tajam:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

Masing-masing file ini berisi ikon tema masing-masing termasuk sebagai gambar latar belakang (gambar-Base64). Dan inilah cara kami dapat menggunakan ini untuk menguji kompatibilitas ikon tertentu dalam desain kami sebelum mengunduhnya untuk digunakan dalam lingkungan produksi.

LANGKAH 1 :

Sertakan stylesheet tema yang ingin Anda gunakan. Misalnya: Untuk tema 'Diuraikan', gunakan stylesheet untuk 'outline.css'

LANGKAH 2 :

Tambahkan kelas berikut ke stylesheet Anda sendiri :

.material-icons-new {
    display: inline-block;
    width: 24px;
    height: 24px;
    background-repeat: no-repeat;
    background-size: contain;
}

.icon-white {
    webkit-filter: contrast(4) invert(1);
    -moz-filter: contrast(4) invert(1);
    -o-filter: contrast(4) invert(1);
    -ms-filter: contrast(4) invert(1);
    filter: contrast(4) invert(1);
}

LANGKAH 3 :

Gunakan ikon dengan menambahkan kelas berikut ke <i>tag:

1) material-icons-newkelas

2) Nama ikon seperti yang ditunjukkan pada halaman demo ikon materi, diawali dengan nama tema diikuti dengan tanda hubung.

Awalan:

Diuraikan: outline-

Bulat: round-

Dua-nada: twotone-

Tajam: sharp-

Misalnya (untuk ikon 'pengumuman'):

outline-announcement, round-announcement, twotone-announcement,sharp-announcement

3) Gunakan kelas 3 opsional icon-whiteuntuk membalikkan warna dari hitam ke putih (untuk latar belakang gelap)

Mengubah ukuran ikon:

Karena ini adalah gambar latar belakang dan bukan ikon font, gunakan properti heightdan widthCSS untuk mengubah ukuran ikon. Standarnya diatur ke 24px di material-icons-newkelas.

Contoh:

Kasus I: Untuk Tema yang Diuraikan pada ikon account_circle :

1) Sertakan stylesheet:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/outline.css">

2) Tambahkan tag ikon di halaman Anda:

<i class="material-icons-new outline-account_circle"></i>

Opsional (Untuk latar belakang gelap):

<i class="material-icons-new outline-account_circle icon-white"></i>

Kasus II: Untuk Tema Tajam ikon penilaian :

1) Sertakan stylesheet:

<link rel="stylesheet" href="https://storage.googleapis.com/non-spec-apps/mio-icons/latest/sharp.css">

2) Tambahkan tag ikon di halaman Anda:

<i class="material-icons-new sharp-assessment"></i>

(Untuk latar belakang gelap):

<i class="material-icons-new sharp-assessment icon-white"></i>

Saya tidak bisa cukup menekankan bahwa ini BUKAN CARA YANG BENAR untuk memasukkan ikon pada lingkungan produksi Anda. Tetapi jika Anda harus memindai beberapa ikon pada halaman yang sedang dalam pengembangan, itu membuat inklusi ikon cukup mudah dan menghemat banyak waktu.

Mengunduh ikon sebagai SVG atau PNG tentu saja merupakan pilihan yang lebih baik dalam hal optimasi kecepatan situs, tetapi ikon-font adalah penghemat waktu dalam fase prototyping dan memeriksa apakah ikon tertentu sesuai dengan desain Anda, dll.

Saya akan memperbarui posting ini jika dan ketika Google menemukan solusi untuk masalah ini yang tidak melibatkan pengunduhan ikon untuk penggunaan.

— Ashil John
sumber
Halo! ini cukup berguna, tetapi saya masih tidak dapat memasukkan ikon saya, saya ingin memasukkan screen_share, saya mencoba dengan kelas .outline-screen_share tetapi tidak mencetak apa-apa, saya chekc kelas di inspektur dan itu ada, mungkin saya kehilangan ada langkah?
— cucuru
1
@cucuru Terima kasih, saya pikir Anda melewatkan Langkah 2 . Menambahkan kelas .material-icons-newdan propertinya ke stylesheet Anda sendiri terlebih dahulu dan kemudian memanggil ikon dengan <i class="material-icons-new outline-screen_share"></i>.
— Ashil John
1
Sekarang tampaknya ada font CSS baru untuk tema Material Icon baru: codepen.io/Chan4077/pen/bZNyQG
— Edric
Bagus! Bekerja seperti pesona.
— Soorya
Untuk Bahan Sudut, Anda harus menggunakan fontSetbukan class. Lihat jawaban Ron Netzer di bawah ini dari 8/14/19.
— Russ
32

Pada 27 Februari 2019, ada font CSS untuk tema Material Icon baru.

Namun, Anda harus membuat kelas CSS untuk menggunakan font.

Keluarga font adalah sebagai berikut:

  • Material Icons Outlined - Ikon yang diuraikan
  • Material Icons Two Tone - Ikon dua-nada
  • Material Icons Round - Ikon bulat
  • Material Icons Sharp - Ikon tajam

Lihat contoh kode di bawah ini untuk contoh:

body {
  font-family: Roboto, sans-serif;
}

.material-icons-outlined,
.material-icons.material-icons--outlined,
.material-icons-two-tone,
.material-icons.material-icons--two-tone,
.material-icons-round,
.material-icons.material-icons--round,
.material-icons-sharp,
.material-icons.material-icons--sharp {
  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;
  -webkit-font-feature-settings: 'liga';
  -webkit-font-smoothing: antialiased;
}

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

.material-icons-two-tone,
.material-icons.material-icons--two-tone {
  font-family: 'Material Icons Two Tone';
}

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

.material-icons-sharp,
.material-icons.material-icons--sharp {
  font-family: 'Material Icons Sharp';
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons material-icons--outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons material-icons--two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons material-icons--round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons material-icons--sharp">assignment</i>
  </section>
</body>

</html>
Luaskan cuplikan

Atau melihatnya di Codepen

EDIT: Pada 10 Maret 2019, tampaknya sekarang ada kelas untuk ikon font baru:

body {
  font-family: Roboto, sans-serif;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>
Luaskan cuplikan

EDIT # 2: Ini solusi untuk mewarnai ikon dua-nada dengan menggunakan filter gambar CSS (kode diadaptasi dari komentar ini ):

body {
  font-family: Roboto, sans-serif;
}

.material-icons-two-tone {
  filter: invert(0.5) sepia(1) saturate(10) hue-rotate(180deg);
  font-size: 48px;
}

.material-icons,
.material-icons-outlined,
.material-icons-round,
.material-icons-sharp {
  color: #0099ff;
  font-size: 48px;
}
<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500|Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp">
</head>

<body>
  <section id="original">
    <h2>Baseline</h2>
    <i class="material-icons">home</i>
    <i class="material-icons">assignment</i>
  </section>
  <section id="outlined">
    <h2>Outlined</h2>
    <i class="material-icons-outlined">home</i>
    <i class="material-icons-outlined">assignment</i>
  </section>
  <section id="two-tone">
    <h2>Two tone</h2>
    <i class="material-icons-two-tone">home</i>
    <i class="material-icons-two-tone">assignment</i>
  </section>
  <section id="rounded">
    <h2>Rounded</h2>
    <i class="material-icons-round">home</i>
    <i class="material-icons-round">assignment</i>
  </section>
  <section id="sharp">
    <h2>Sharp</h2>
    <i class="material-icons-sharp">home</i>
    <i class="material-icons-sharp">assignment</i>
  </section>
</body>

</html>
Luaskan cuplikan

Atau melihatnya di Codepen

— Edric
sumber
3
Tampaknya coloratribut CSS saat ini tidak memengaruhi warna tema Icon Bahan baru.
— Edric
1
Ikon yang diuraikan tidak berfungsi yaitu, apakah ada pemikiran?
— Jismon Thomas
1
itu tidak muncul sama sekali, bahkan jika Anda menjalankan halaman ini yaitu, Anda dapat melihat bahwa itu hanya ruang kosong, saya akhirnya menggunakan baseline pada yaitu!
— Jismon Thomas
Tampaknya colorproperti didukung pada semua ikon kecuali ikon dua-nada. (Diuji mulai hari ini)
— Edric
17

Untuk bahan sudut Anda harus menggunakan input fontSet untuk mengubah keluarga font:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

<mat-icon>edit</mat-icon>
<mat-icon fontSet="material-icons-outlined">edit</mat-icon>
<mat-icon fontSet="material-icons-two-tone">edit</mat-icon>
...
— Ron
sumber
12

Jika Anda sudah memiliki ikon materi yang bekerja di proyek web Anda, hanya perlu memperbarui referensi Anda di file html dan kelas yang digunakan untuk ikon:

referensi html:

Sebelum

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

Setelah

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp"
rel="stylesheet" />

ikon materi kelas:

Setelah itu baru periksa mana className yang Anda gunakan:

Sebelum:

<i className="material-icons">weekend</i>

Setelah:

<i className="material-icons-outlined">weekend</i>

itu bekerja untuk saya ... Pura vida!

— rocaes90
sumber
10

Apa yang berhasil bagi saya adalah menggunakan _outline bukan _outline d setelah nama ikon.

<mat-icon>info</mat-icon>

vs. 

<mat-icon>info_outline</mat-icon>
— fxrxz
sumber
Ah-hah, jadi bekerja seperti itu di Angular; itu cukup rapi.
— Ashil John
5
ada beberapa ikon yang menguraikan dan memiliki akhiran _outline. Ini hanya berfungsi untuk mereka
— Sangmin Lee
@SangminLee ya, ini adalah daftar ikon di mana ia seharusnya bekerja. material.io/tools/icons/?style=outline
— fxrxz
@ Aj334 ya rapi, apakah Anda dapat menerima jawaban ini jika menjawab pertanyaan Anda?
— fxrxz
1
Saya hanya menggunakan ini dengan font web Material polos dalam proyek React.js. Jadi itu tidak ada hubungannya dengan Angular. Saya pikir ini solusinya.
— Juuro
9

Pada 12/05/2020, Anda harus melakukannya

1. termasuk CSS:

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

2. Gunakan seperti ini:

<i class="material-icons">account_balance</i>
<i class="material-icons material-icons-outlined">account_balance</i>
<i class="material-icons material-icons-two-tone">account_balance</i>
<i class="material-icons material-icons-sharp">account_balance</i>
<i class="material-icons material-icons-round">account_balance</i>

Catatan: Misalnya, untuk menggunakan gaya yang diuraikan, Anda perlu menentukan materi-ikon DAN kelas materi-ikon-diuraikan .

— Vano Maisuradze
sumber
Untuk Angular, gunakan <mat-icon class="material-icons-two-tone">alarm</mat-icon>. Ganti kelas dengan baik material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharpatau material-icons-round. Dan ganti alarm dengan nama ikon apa pun dari: material.io/resources/icons/?icon=assessment&style=baseline
— Quad Coders
Menggunakan mat-icon berarti, Anda menambahkan modul tambahan, yang meningkatkan ukuran aplikasi (Ya, itu meningkatkan sedikit, tetapi kadang-kadang beberapa kb penting)
— Vano Maisuradze
@VanoMaisuradze dapatkah Anda menautkan ke dokumen?
— Mehulkumar
AFAIK, tidak ada dokumen untuk ini.
— Vano Maisuradze
5

Tema baru mungkin bukan (belum?) Bagian dari font Material Icons. Link .

— Martin
sumber
Proyek itu belum menerbitkan rilis dalam 2 tahun, saya tidak menahan nafas.
— Coderer
3

Hasil edit terbaru Aj334 bekerja dengan sempurna.

google CDN

<link href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp" rel="stylesheet">

Elemen Ikon

<i class="material-icons">donut_small</i>
<i class="material-icons-outlined">donut_small</i>
<i class="material-icons-two-tone">donut_small</i>
<i class="material-icons-round">donut_small</i>
<i class="material-icons-sharp">donut_small</i>
— lakshmeesha
sumber
3

Sejauh ini tidak ada jawaban yang menjelaskan cara mengunduh berbagai varian font tersebut sehingga Anda dapat menayangkannya dari situs web Anda sendiri (server WWW).

Meskipun ini mungkin tampak seperti masalah kecil dari perspektif teknis, ini adalah masalah besar dari perspektif hukum, setidaknya jika Anda bermaksud untuk menampilkan halaman Anda kepada warga negara Uni Eropa (atau bahkan, jika Anda melakukannya secara tidak sengaja). Ini bahkan berlaku untuk perusahaan yang tinggal di AS (atau negara mana pun di luar UE).

Jika ada yang tertarik mengapa ini terjadi, saya akan memperbarui jawaban ini dan memberikan beberapa detail lebih lanjut di sini, tetapi saat ini, saya tidak ingin membuang terlalu banyak ruang di luar topik.

Setelah mengatakan ini:

Saya telah mengunduh semua versi (biasa, diuraikan, dibulatkan, tajam, dua nada) dari font tersebut mengikuti dua langkah yang sangat mudah (itu adalah jawaban @ Aj334 untuk pertanyaannya sendiri yang menempatkan saya di jalur yang benar) (contoh: "diuraikan " varian):

  1. Dapatkan CSS dari Google CDN dengan secara langsung membiarkan browser Anda mengambil URL CSS , yaitu salin URL berikut ke bilah lokasi browser Anda:

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

    Ini akan mengembalikan halaman yang terlihat seperti ini (setidaknya di Firefox 70.0.1 pada saat penulisan ini):

    /* fallback */
@font-face {
  font-family: 'Material Icons Outlined';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2) format('woff2');
}

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

  2. Temukan baris yang dimulai dengan src:kode di atas, dan biarkan browser Anda mengambil URL yang terkandung dalam baris itu , yaitu salin URL berikut ke dalam bilah lokasi browser Anda:

    https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2

    Sekarang browser akan mengunduh .woff2file itu dan menawarkan untuk menyimpannya secara lokal (setidaknya, Firefox melakukannya).

Dua komentar terakhir:

Tentu saja, Anda dapat mengunduh varian lain dari font tersebut menggunakan metode yang sama. Pada langkah pertama, ganti saja urutan karakter Outlineddi URL dengan urutan karakter Round(ya, sungguh, meskipun di sini disebut "Bulat" di menu navigasi kiri), Sharpatau Two+Tone, masing-masing. Halaman hasil akan terlihat hampir sama setiap kali, tetapi URL di src:baris tentu berbeda untuk setiap varian.

Terakhir, pada langkah 1, Anda bahkan dapat menggunakan URL itu:

https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Two+Tone|Material+Icons+Round|Material+Icons+Sharp

Ini akan mengembalikan CSS untuk semua varian dalam satu halaman, yang kemudian berisi lima src:baris, masing-masing dengan URL lain yang menentukan di mana font masing-masing berada.

— Binarus
sumber
2

Tautan webfonts berfungsi sekarang, di semua browser!

Cukup tambahkan tema Anda ke tautan font yang dipisahkan oleh pipa ( |), seperti ini

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

Kemudian referensi kelas, seperti ini:

// class="material-icons" or class="material-icons-outlined"

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

Pola ini juga akan bekerja dengan Bahan Sudut:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>
— intergalaksi
sumber
Saya akan menjaga pendekatan sederhana ini sampai solusi atribut keluar. Bagus @intergalactic
— Sparker73
Bagaimana jika saya mendapatkan ikon melalui dependenciesdi package.json aplikasi bukan <link>? Saya tidak bisa memasukkan ikon yang diuraikan dalam URL ...
— Jago
1

Pasang tautan kepala ke gaya google

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

dan dalam tubuh sesuatu seperti ini 

<i class="material-icons-outlined">bookmarks</i>
— Володимир Лук'янюк
sumber
0

Saya akhirnya menggunakan aplikasi IcoMoon untuk membuat font khusus hanya menggunakan ikon bertema baru yang saya butuhkan untuk membangun aplikasi web baru-baru ini. Ini tidak sempurna tetapi Anda dapat meniru fungsionalitas Google Font yang ada dengan cukup baik dengan sedikit pengaturan. Berikut langgannya:

https://medium.com/@leemartin/how-to-use-material-icon-outlined-rounded-two-tone-and-sharp-themes-92276f2415d2

Jika seseorang merasa berani, mereka dapat mengonversi seluruh tema menggunakan IcoMoon. Sial, IcoMoon mungkin memiliki proses internal yang akan membuatnya mudah karena mereka sudah memiliki Material Ikon asli yang ditetapkan di perpustakaan mereka.

Bagaimanapun, ini bukan solusi yang sempurna, tetapi itu berhasil untuk saya.

— Lee Martin
sumber
0

Saya tidak puas bahwa sampai tahu Google belum merilis desain baru mereka sebagai font atau ikon set svg. Oleh karena itu saya mengumpulkan paket npm kecil untuk menyelesaikan masalah.

https://www.npmjs.com/package/ts-material-icons-svg

Cukup impor ikon yang ingin Anda gunakan dan tambahkan ke registri Anda. Ini juga mendukung pengocokan pohon karena hanya ikon yang ditambahkan ke proyek Anda yang benar-benar Anda inginkan dan / atau butuhkan.

npm i --save https://github.com/MarcusCalidus/ts-material-icons-svg.git

untuk menggunakan dua ikon nada misalnya

import {icon_edit} from 'ts-material-icons-svg/dist/twotone';

matIconRegistry.addSvgIcon(
            'edit',
            domSanitizer.bypassSecurityTrustResourceUrl(icon_edit),
        );

Dalam template html Anda, Anda sekarang dapat menggunakan ikon baru

<mat-icon svgIcon="edit"></mat-icon>
— MarcusCalidus
sumber
0

Menyiapkan warna Two-tone:

Seperti dijelaskan di atas, Anda dapat menggunakan colorkunci css kecuali untuk material Tema dua-nada yang tampaknya glitchy ;-)

Solusi dijelaskan dalam salah satu dari beberapa masalah bahan github sudut dengan menggunakan filter css kustom. Filter khusus ini dapat dibuat di sini .

Misalnya:

Html:

<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons|Material+Icons+Outlined|Material+Icons+Round|Material+Icons+Two+Tone|Material+Icons+Sharp">

<i class="material-icons-two-tone red">home</i>

css:

.red {
filter: invert(8%) sepia(94%) saturate(4590%) hue-rotate(358deg) brightness(101%) contrast(112%);
}

Lampiran:

— zerocewl
sumber
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.