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.

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.

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>

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>

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>

Atau melihatnya di Codepen

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

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!

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>

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 .

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

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>

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.

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>

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>

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.

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>

Agak lucu, Google telah membuat font yang berfungsi dengan benar di Safari tetapi tidak di Chrome. Inilah https://codepen.io/anon/pen/zbavza

<i class="material-icons-round red">warning</i>

Mengacu pada https://stackoverflow.com/a/54902967/4740291 dan tidak dapat mengubah warna menggunakan css.

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:

• Bekerja Stackblitz Angular
• Contoh codepen
• Pembuat filter CSS Codepen