Google, Materyal Tasarımı Simgelerini 4 yeni önceden ayarlanmış temayla yeniledi :

Normal Dolgulu / Baseline temasına ek olarak Seviyelendirilmiş, Yuvarlak, İki Ton ve Keskin :

Ancak, ne yazık ki, yeni temaların nasıl kullanılacağını hiçbir yerde söylemiyor.

Ben oldum Google Web Fonts aracılığıyla bunu kullanarak bağlantıyı dahil ederek:

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

Ve sonra belgelerde önerildiği gibi gerekli simgeyi kullanarak :

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

Ancak her zaman 'Dolgulu / Taban Çizgisi' sürümünü gösterir.

Bunun yerine Anahattı temayı kullanmak için aşağıdakileri yapmayı denedim :

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

ve Web Yazı Tipleri bağlantısını şu şekilde değiştirmek:

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

Ama işe yaramıyor.

Ve karanlıkta böyle çekim yapmanın bir anlamı yok.

tl; dr: Yeni temaları kullanmayı deneyen var mı? Hatta temel sürüm (satır içi html etiketi) gibi çalışıyor mu? Veya yalnızca SVG veya PNG formatları olarak mı indirilmek içindir?

Şimdiden teşekkürler.

Güncelleme (31/03/2019): Tüm simge temaları artık Google Web Yazı Tipleri aracılığıyla çalışıyor.

Edric'in işaret ettiği gibi, şu anda belgenizin kafasına google web yazı tipleri bağlantısını şimdi eklemek gibi bir şey var:

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

Ve sonra belirli bir temanın simgesini çıkarmak için doğru sınıfı ekleyin.

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

Simgelerin rengi de CSS kullanılarak değiştirilebilir.

Not: İki tonlu tema simgeleri şu anda biraz parıltılı.

Güncelleme (14/11/2018): "_outline" son ekiyle çalışan 16 anahat simgesinin listesi.

_Outline'ı kullanarak normal Material-icons Webfont ile çalışan 16 anahat ikonunun en son listesi aşağıdadır son ekini (test edilmiş ve onaylanmış) .

( Material -design-icons github sayfasında olduğu gibi . " _Outline_24px.svg " araması yapın )

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

Pie_chart'ın anahat değil " pie_chart_ anahatları " olması gerektiğini unutmayın .

Bu, bir satır içi etiket kullanarak yeni simge temalarını test etmek için bir hack'tir. Resmi çözüm değil.

Bugün itibariyle (19 Temmuz 2018), yeni ikon temalarının tanıtılmasından bu yana 2 aydan biraz fazla bir süre içinde , bu simgeleri bir satır içi etiket kullanarak eklemenin yolu yok<i class="material-icons"></i> .

+ Martin , Github'da bununla ilgili olarak dile getirilen bir sorun olduğuna dikkat çekti: https://github.com/google/material-design-icons/issues/773

Dolayısıyla, Google bunun için bir çözüm bulana kadar , uygun simgeleri SVG veya PNG olarak indirmeden önce bu yeni simge temalarını geliştirme ortamıma eklemek için bir kesmek kullanmaya başladım . Ve hepinizle paylaşacağımı düşündüm.

ÖNEMLİ : Google'ın içerdiği her CSS dosyasının boyutu 1 MB'ın üzerinde olduğundan bunu bir üretim ortamında kullanmayın.

Google, demo sayfalarındaki simgeleri göstermek için bu stil sayfalarını kullanır:

anahat:

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

Yuvarlatılmış:

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

İki ton:

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

Keskin:

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

Bu dosyaların her biri, arka plan görüntüleri (Base64 görüntü verileri) olarak dahil edilen ilgili temaların simgelerini içerir. Ve bunu üretim ortamında kullanmak üzere indirmeden önce tasarımımızdaki belirli bir simgenin uyumluluğunu test etmek için bunu nasıl kullanabiliriz.

1.ADIM :

Kullanmak istediğiniz temanın stil sayfasını ekleyin. Örneğin: 'Seviyelendirilmiş' tema için, 'anahat.css' için stil sayfasını kullanın

2.ADIM :

Aşağıdaki stilleri kendi stil sayfanıza ekleyin :

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

3.ADIM :

Aşağıdaki sınıfları ekleyerek simgeyi kullanın .<i> etiketi:

1) material-icons-newsınıf

2) Malzeme simgeleri demo sayfasında gösterildiği gibi, tema adının önüne bir tire işareti eklenmiş simge adı.

Ön ekler:

Anahatlı: outline-

Yuvarlatılmış: round-

İki ton: twotone-

Keskin: sharp-

Örn ('duyuru' simgesi için):

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

3) icon-whiteRengi siyahtan beyaza çevirmek için isteğe bağlı bir 3. sınıf kullanın (koyu arka planlar için)

Simge boyutunu değiştirme:

Bu yazı tipi simgesi değil arka plan resmi olduğundan, simgelerin boyutunu değiştirmek için CSS'nin heightve widthözelliklerini kullanın . Sınıfta varsayılan değer 24 piksel olarak ayarlanmıştır material-icons-new.

Misal:

Durum I: account_circle Ana Hattının Teması İçin simgesi:

1) Stil sayfasını ekleyin:

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

2) Sayfanıza simge etiketi ekleyin:

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

İsteğe bağlı (Koyu arka planlar için):

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

Durum II: For Keskin Teması değerlendirme simgesi:

1) Stil sayfasını ekleyin:

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

2) Sayfanıza simge etiketi ekleyin:

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

(Koyu arka planlar için):

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

Bu, üretim ortamınıza simgeleri dahil etmenin DOĞRU YOL olmadığını vurgulayamam. Ancak, geliştirme sayfanızdaki birden çok simgeyi taramanız gerekiyorsa, simge eklemeyi oldukça kolaylaştırır ve çok zaman kazandırır.

Simgeyi SVG veya PNG olarak indirmek, site hızı optimizasyonu söz konusu olduğunda daha iyi bir seçenektir, ancak yazı tipi simgeleri, prototip oluşturma aşamasına geldiğinde ve belirli bir simgenin tasarımınızla gidip gitmediğini kontrol etmek için zaman tasarrufu sağlar.

Google bu sorun için kullanım için bir simge indirmeyi içermeyen bir çözüm bulursa ve bu mesajı güncelleyeceğim.

27 Şubat 2019 itibarıyla, yeni Material Icon temaları için CSS yazı tipleri bulunmaktadır.

Ancak, yazı tiplerini kullanmak için CSS sınıfları oluşturmanız gerekir.

Yazı tipi aileleri aşağıdaki gibidir:

• Material Icons Outlined - Seviyelendirilmiş simgeler
• Material Icons Two Tone - İki tonlu simgeler
• Material Icons Round - Yuvarlak simgeler
• Material Icons Sharp - Keskin simgeler

Örnek için aşağıdaki kod örneğine bakın:

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>

Veya Codepen'de görüntüleyin

EDIT: 10 Mart 2019 itibarıyla, artık yeni yazı tipi simgeleri için sınıflar var gibi görünüyor:

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>

2. DÜZENLEME: İşte CSS resim filtrelerini ( bu açıklamadan uyarlanan kod) kullanarak iki tonlu simgeleri renklendirmek için bir geçici çözüm :

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>

Veya Codepen'de görüntüleyin

Açısal malzeme için yazı tipi ailesini değiştirmek için fontSet girdisini kullanmalısınız:

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

Zaten malzeme simgeleriniz varsaWeb projenizde çalışan , html dosyasındaki referansınızı ve simgeler için kullanılan sınıfı güncellemeniz yeterlidir:

html referansı:

Önce

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

Sonra

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

malzeme simgeler sınıfı:

Bundan sonra sadece hangi className kullandığınızı kontrol edin:

Önce:

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

Sonra:

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

benim için işe yarıyor ... Pura vida!

Benim için işe yarayan şey , simge adından sonra _outline değil _outline d kullanmaktır .

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

vs

<mat-icon>info_outline</mat-icon>

12.05.2020 itibarıyla,

1. CSS'yi ekleyin:

<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. Şöyle kullanın:

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

Not: Örneğin, anahatları belirlenmiş stili kullanmak için, malzeme simgelerini VE malzeme simgeleri simgelerini özetlenen sınıfları belirtmeniz gerekir .

Yeni temalar büyük olasılıkla (henüz?) Malzeme Simgeleri yazı tipinin bir parçası değildir. Bağlantı .

Aj334'ün son düzenlemesi mükemmel çalışıyor.

google CDN'si

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

Simge Elemanı

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

Şimdiye kadar cevapların hiçbiri, bu yazı tipinin çeşitli varyantlarının nasıl indirileceğini açıklamıyor, böylece bunları kendi web sitenizden (WWW sunucusu) sunabilirsiniz.

Bu teknik açıdan küçük bir sorun gibi görünse de, en azından sayfalarınızı herhangi bir AB vatandaşına sunmak istiyorsanız (hatta bunu yanlışlıkla yapıyorsanız) yasal açıdan büyük bir sorundur. Bu, ABD'de (veya AB dışındaki herhangi bir ülkede) bulunan şirketler için bile geçerlidir.

Herkes bunun neden olduğunu merak ederse, bu cevabı güncelleyeceğim ve burada daha fazla ayrıntı vereceğim, ancak şu anda konu dışı çok fazla alan harcamak istemiyorum.

Bunu söylerken:

İki çok kolay adımı izleyerek bu yazı tipinin tüm sürümlerini (normal, anahatlı, yuvarlak, keskin, iki tonlu) indirdim (beni Aj334'ün beni doğru yola koyan kendi sorusuna verdiği cevap) (örnek: " "varyant):

1. CSS'nin doğrudan tarayıcınızın CSS URL'sini almasına izin vererek Google CDN'den alın , yani aşağıdaki URL'yi tarayıcınızın konum çubuğuna kopyalayın:

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

   Bu, şöyle görünen bir sayfa döndürür (en azından bunu yazarken Firefox 70.0.1'de):

   /* 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. src:Yukarıdaki koddan başlayarak satırı bulun ve tarayıcınızın o satırdaki URL'yi getirmesine izin verin , yani aşağıdaki URL'yi tarayıcınızın konum çubuğuna kopyalayın:

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

   Şimdi tarayıcı bu .woff2dosyayı indirecek ve yerel olarak kaydetmeyi önerecektir (en azından Firefox yaptı).

Son iki açıklama:

Tabii ki, aynı yöntemi kullanarak bu yazı tipinin diğer varyantlarını indirebilirsiniz. İlk adımda, OutlinedURL'deki karakter dizisini karakter dizileriyle değiştirin Round(evet, gerçekten, burada sol gezinme menüsünde "Yuvarlak" olarak adlandırılsa Sharpda ) veya Two+Tone. Sonuç sayfası her seferinde neredeyse aynı görünecek, ancaksrc: elbette satırındaki her varyant için farklıdır.

Son olarak, 1. adımda bu URL'yi bile kullanabilirsiniz:

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

Bu, bir sayfadaki tüm varyantlar için CSS değerini döndürür ve bu src:satırdan sonra her biri ilgili yazı tipinin bulunduğu başka bir URL'ye sahip beş satır içerir .

Webfonts bağlantısı artık tüm tarayıcılarda çalışıyor!

Temalarınızı bir boru ( |) ile ayrılmış yazı tipi bağlantısına eklemeniz yeterlidir.

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

Ardından sınıfa şu şekilde bakın:

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

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

Bu desen aynı zamanda Açısal Malzeme ile de çalışacaktır:

<mat-icon>account_balance</mat-icon>
<mat-icon class="material-icons-outlined">account_balance</mat-icon>

Google stillerine kafa bağlantısı koyun

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

ve vücutta böyle bir şey

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

Son zamanlarda yapılan bir web uygulaması derlemesi için gerekli olan yeni temalı simgeleri kullanarak özel bir yazı tipi oluşturmak için IcoMoon uygulamasını kullandım. Mükemmel değil, ancak mevcut Google Font işlevini biraz kurulumla oldukça güzel taklit edebilirsiniz. İşte bir yazı:

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

Birisi cesur hissediyorsa, temanın tamamını IcoMoon'u kullanarak dönüştürebilir. Cehennem, IcoMoon muhtemelen kütüphanelerinde orijinal Malzeme Simgelerini zaten ayarladıklarından bunu kolaylaştıracak dahili bir sürece sahiptir.

Her neyse, bu mükemmel bir çözüm değil, ama benim için çalıştı.

Google'ın yeni tasarımlarını henüz font veya svg simge seti olarak yayınlamadığından memnun kalmadım. Bu nedenle sorunu çözmek için küçük bir npm paketi bir araya getirdim.

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

Kullanmak istediğiniz simgeleri içe aktarın ve kayıt defterinize ekleyin. Bu, aynı zamanda ağaç sarsıntısını da destekler, çünkü projenize yalnızca gerçekten istediğiniz ve / veya ihtiyacınız olan simgeler eklenir.

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

örneğin iki tonlu simge kullanmak için

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

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

Html şablonunuzda artık yeni simgeyi kullanabilirsiniz

<mat-icon svgIcon="edit"></mat-icon>

Biraz komik bir şekilde, Google Safari'de doğru çalışan ancak Chrome'da çalışmayan bir yazı tipi yaptı. İşte https://codepen.io/anon/pen/zbavza

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

İstinaden https://stackoverflow.com/a/54902967/4740291 değil css kullanarak rengini değiştirmek mümkün.

İki tonlu rengi ayarlama:

Yukarıda açıklandığı gibi colormalzemeler dışında css tuşunu kullanabilirsiniz; Glitchy gibi görünen iki tonlu tema ;-)

Özel bir css filtresi kullanılarak birkaç açısal malzeme github sorunundan birinde bir çözüm açıklanır . Bu özel filtre oluşturulabilir burada .

Örneğin:

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%);
}

Ekler:

• Açısal Çalışma Stackblitz
• Codepen örneği
• Codepen CSS filtre Üreteci