171

Google ulepszyło swoje ikony Material Design za pomocą 4 nowych gotowych motywów:

Konturowany, zaokrąglony, dwukolorowy i ostry , oprócz zwykłego motywu Wypełniony / Linia bazowa :

Ale niestety nigdzie nie mówi, jak korzystać z nowych motywów.

Używałem go za pośrednictwem Google Web Fonts, dołączając link:

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

A następnie używając wymaganej ikony, zgodnie z sugestią w dokumentacji :

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

Ale zawsze pokazuje wersję „Filled / Baseline”.

Próbowałem wykonać następujące czynności, aby zamiast tego użyć motywu konspektu :

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

i zmieniając łącze Czcionki internetowe na:

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

itd. Ale to nie działa.

I nie ma sensu robić takich zdjęć w ciemności.

tl; dr: Czy ktoś próbował używać nowych motywów? Czy to w ogóle działa jak wersja podstawowa (wbudowany tag HTML)? A może jest przeznaczony do pobrania tylko w formacie SVG lub PNG?

Z góry dziękuję.

icons material-design google-material-icons Ashil John
źródło

171

Aktualizacja (31.03.2019): Wszystkie motywy ikon działają teraz za pośrednictwem czcionek internetowych Google.

Jak zauważył Edric, wystarczy teraz dodać link do czcionek internetowych Google w głowie dokumentu, na przykład:

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

A następnie dodanie odpowiedniej klasy, aby wyświetlić ikonę określonego motywu.

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

Kolor ikon można również zmienić za pomocą CSS.

Uwaga: ikony motywów dwukolorowych są obecnie nieco glitchy.

Aktualizacja (14.11.2018): Lista 16 ikon konspektu, które działają z sufiksem „_outline”.

Oto najnowsza lista 16 ikon konspektu, które współpracują ze zwykłymi czcionkami internetowymi Material-icons, używając sufiksu _outline (przetestowane i potwierdzone).

(Jak można znaleźć na stronie github Material-Design-icons . Wyszukaj: „ _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>

Zauważ, że pie_chart musi być „ pie_chart_ nakreślono ”, a nie zarys .

To hack, aby przetestować nowe motywy ikon za pomocą wbudowanego tagu. To nie jest oficjalne rozwiązanie.

Na dzień dzisiejszy (19 lipca 2018 r.), Nieco ponad 2 miesiące od wprowadzenia nowych motywów ikon, nie ma możliwości uwzględnienia tych ikon za pomocą wbudowanego tagu .

+ Martin wskazał, że na Github pojawił się problem dotyczący tego samego: https://github.com/google/material-design-icons/issues/773

Tak więc, dopóki Google nie wymyśli rozwiązania tego problemu, zacząłem używać hacka, aby dołączyć te nowe motywy ikon do mojego środowiska programistycznego przed pobraniem odpowiednich ikon jako SVG lub PNG. Pomyślałem, że podzielę się tym z wami wszystkimi.

WAŻNE : nie używaj tego w środowisku produkcyjnym, ponieważ każdy z dołączonych plików CSS z Google ma ponad 1 MB.

Google używa tych arkuszy stylów, aby zaprezentować ikony na swojej stronie demonstracyjnej:

Zarys:

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

Bułczasty:

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

Dwutonowy:

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

Ostry:

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

Każdy z tych plików zawiera ikony odpowiednich motywów zawarte jako obrazy tła (dane obrazu Base64). A oto, jak możemy to wykorzystać do przetestowania zgodności określonej ikony w naszym projekcie przed pobraniem jej do użytku w środowisku produkcyjnym.

KROK 1 :

Dołącz arkusz stylów motywu, którego chcesz użyć. Np .: w przypadku motywu „Konspekt” użyj arkusza stylów dla „zarys.css”

KROK 2 :

Dodaj następujące klasy do własnego arkusza stylów:

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

KROK 3 :

Użyj ikony, dodając do tagu następujące klasy :

1) material-icons-newklasa

2) Nazwa ikony, jak pokazano na stronie demonstracyjnej ikon materiałów, poprzedzona nazwą motywu, po której następuje łącznik.

Przedrostki:

Przedstawione: outline-

Bułczasty: round-

Dwutonowy: twotone-

Ostry: sharp-

Np. (Dla ikony „ogłoszenie”):

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

3) Użyj opcjonalnej trzeciej klasy icon-whitedo odwrócenia koloru z czarnego na biały (w przypadku ciemnego tła)

Zmiana rozmiaru ikon:

Ponieważ jest to obraz tła, a nie ikona czcionki, użyj właściwości heighti widthCSS, aby zmienić rozmiar ikon. W material-icons-newklasie wartość domyślna to 24px .

Przykład:

Przypadek I: Dla Opisane tematem account_circle ikoną:

1) Dołącz arkusz stylów:

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

2) Dodaj tag ikony na swojej stronie:

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

Opcjonalnie (w przypadku ciemnego tła):

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

Przypadek II: Dla firmy Sharp tematem oceny ikoną:

1) Dołącz arkusz stylów:

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

2) Dodaj tag ikony na swojej stronie:

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

(W przypadku ciemnego tła):

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

Nie mogę wystarczająco podkreślić, że NIE JEST TO WŁAŚCIWY SPOSÓB umieszczania ikon w środowisku produkcyjnym. Ale jeśli musisz przejrzeć wiele ikon na stronie w fazie rozwoju, sprawia to, że włączenie ikony jest dość łatwe i oszczędza dużo czasu.

Pobranie ikony w formacie SVG lub PNG z pewnością jest lepszą opcją, jeśli chodzi o optymalizację szybkości witryny, ale ikony czcionek oszczędzają czas, jeśli chodzi o fazę prototypowania i sprawdzanie, czy dana ikona pasuje do twojego projektu itp.

Zaktualizuję ten post, jeśli i kiedy Google wymyśli rozwiązanie tego problemu, które nie wymaga pobierania ikony do użytku.

Ashil John
źródło

Witaj! jest to całkiem przydatne, ale nadal nie mogę dołączyć mojej ikony, chcę dołączyć screen_share, próbowałem z klasą .outline-screen_share, ale nic nie drukuje, sprawdzam klasę w inspektorze i istnieje, czy mogę stracić jakikolwiek krok?

cucuru

1

@cucuru Dzięki, myślę, że przegapiłeś krok 2 . .material-icons-newNajpierw dodaj klasę i jej właściwości do własnego arkusza stylów, a następnie wywołaj ikonę przez .

Ashil John

1

Wygląda na to, że są teraz nowe czcionki CSS dla nowych motywów Material Icon: codepen.io/Chan4077/pen/bZNyQG

Edric,

Wspaniały! Działa jak marzenie.

Soorya

W przypadku materiału kątowego należy użyć fontSetzamiast class. Zobacz odpowiedź Rona Netzera poniżej z 14.08.19.

Russ

31

Od 27 lutego 2019 r. Dostępne są czcionki CSS dla nowych motywów ikon materiału.

Musisz jednak utworzyć klasy CSS, aby używać czcionek.

Rodziny czcionek są następujące:

Material Icons Outlined - Przedstawione ikony
Material Icons Two Tone - Ikony dwukolorowe
Material Icons Round - Zaokrąglone ikony
Material Icons Sharp - Ostre ikony

Zobacz przykładowy kod poniżej, aby zobaczyć przykład:

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>

Rozwiń fragment

Lub obejrzyj to w Codepen

EDYCJA: Od 10 marca 2019 r. Wydaje się, że istnieją teraz klasy dla nowych ikon czcionek:

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>

Rozwiń fragment

EDYCJA # 2: Oto obejście problemu dwukolorowych ikon za pomocą filtrów CSS (kod dostosowany na podstawie tego komentarza ):

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>

Rozwiń fragment

Lub obejrzyj to w Codepen

Edric
źródło

3

Wygląda na to, że coloratrybut CSS obecnie nie wpływa na kolor nowych motywów Material Icon.

Edric

1

Ikona zarysowana nie działa, tj.?, Jakieś myśli?

Jismon Thomas,

1

w ogóle się nie pojawia, nawet jeśli uruchomisz tę stronę na ie, widzisz, że jest to po prostu pusta przestrzeń, skończyło się na użyciu linii bazowej na ie!

Jismon Thomas,

Wygląda na to, że colorwłaściwość jest obsługiwana we wszystkich ikonach z wyjątkiem ikon dwukolorowych. (Testowane na dzień dzisiejszy)

Edric

16

W przypadku materiałów kątowych należy użyć danych wejściowych fontSet, aby zmienić rodzinę czcionek:

<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
źródło

12

Jeśli masz już ikony materiałów działające w swoim projekcie internetowym, wystarczy zaktualizować odniesienie w pliku html i używaną klasę dla ikon:

odnośnik html:

Przed

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

Po

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

klasa ikon materiałów:

Następnie sprawdź, której nazwy klasy używasz:

Przed:

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

Po:

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

to działa dla mnie ... Pura vida!

rocaes90
źródło

10

U mnie zadziałało użycie _outline, a nie _outline d po nazwie ikony.

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

vs

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

fxrxz
źródło

Ah-hah, więc to działa w ten sposób na Angular; to całkiem fajne.

Ashil John

5

jest kilka ikon, które są konturami i mają przyrostek _outline. Działa tylko w przypadku tych

Sangmin Lee

@SangminLee tak, to jest lista ikon, w których powinno działać. material.io/tools/icons/?style=outline

fxrxz

@ Aj334 tak, jest fajnie, czy też możesz zaakceptować tę odpowiedź, jeśli odpowiedziała na twoje pytanie?

fxrxz

1

Właśnie użyłem tego ze zwykłą czcionką internetową Material w projekcie React.js. Więc to nie ma nic wspólnego z Angular. Myślę, że to jest rozwiązanie.

Juuro,

9

Od 12.05.2020 r. Musisz

1. uwzględnij 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. Użyj tego w ten sposób:

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

Uwaga: Na przykład, aby użyć stylu konturowego, musisz określić klasy materiałów-ikon ORAZ klasy materiałów-ikon .

Vano Maisuradze
źródło

W przypadku Angular użyj <mat-icon class="material-icons-two-tone">alarm</mat-icon>. Wymień klasę albo material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharplub material-icons-round. I zamień alarm na dowolną nazwę ikony z: material.io/resources/icons/?icon=assessment&style=baseline

Quad Coders

Używając mat-icon oznacza, że dodajesz dodatkowy moduł, który zwiększa rozmiar aplikacji (no cóż, trochę się zwiększa, ale czasem kilka kb jest ważne)

Vano Maisuradze

@VanoMaisuradze czy możesz podać link do dokumentu?

Mehulkumar

AFAIK, nie ma na to dokumentu.

Vano Maisuradze

5

Nowe motywy prawdopodobnie nie są (jeszcze?) Częścią czcionki Material Icons. Link .

Jaskółka oknówka
źródło

Ten projekt nie ukazał się od 2 lat, nie wstrzymuję oddechu.

Coderer

3

Ostatnia edycja Aj334 działa doskonale.

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

Element ikony

<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
źródło

3

Żadna z dotychczasowych odpowiedzi nie wyjaśnia, jak pobrać różne warianty tej czcionki, aby móc je obsługiwać z własnej strony internetowej (serwera WWW).

Choć z technicznego punktu widzenia może się to wydawać drobną kwestią, jest to duża kwestia z prawnego punktu widzenia, przynajmniej jeśli zamierzasz przedstawić swoje strony każdemu obywatelowi UE (lub nawet, jeśli zrobisz to przez przypadek). Dotyczy to nawet firm, które mają siedzibę w USA (lub w dowolnym kraju poza UE).

Jeśli ktoś jest zainteresowany, dlaczego tak jest, zaktualizuję tę odpowiedź i podam tutaj więcej szczegółów, ale w tej chwili nie chcę marnować zbyt wiele miejsca poza tematem.

Powiedziawszy to:

Pobrałem wszystkie wersje tej czcionki (zwykłą, obrysowaną, zaokrągloną, ostrą, dwukolorową) po wykonaniu dwóch bardzo łatwych kroków (to była odpowiedź @ Aj334 na jego własne pytanie, które postawiło mnie na właściwej ścieżce) (przykład: „nakreślony „wariant):

Pobierz CSS z Google CDN, bezpośrednio zezwalając przeglądarce na pobranie adresu URL CSS , tj. Skopiuj następujący adres URL do paska adresu przeglądarki:

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

To zwróci stronę, która wygląda następująco (przynajmniej w przeglądarce Firefox 70.0.1 w momencie pisania tego):

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

Znajdź wiersz zaczynający się od src:w powyższym kodzie i pozwól przeglądarce pobrać adres URL zawarty w tym wierszu , tj. Skopiuj następujący adres URL do paska adresu przeglądarki:
```
https://fonts.gstatic.com/s/materialiconsoutlined/v14/gok-H7zzDkdnRel8-DQ6KAXJ69wP1tGnf4ZGhUce.woff2
```
Teraz przeglądarka pobierze ten .woff2plik i zaproponuje zapisanie go lokalnie (przynajmniej Firefox to zrobił).

Dwie uwagi końcowe:

Oczywiście możesz pobrać inne warianty tej czcionki, korzystając z tej samej metody. W pierwszym kroku wystarczy zastąpić sekwencję znaków Outlinedw adresie URL sekwencją znaków Round(tak, naprawdę, chociaż tutaj nazywa się to „Zaokrąglone” w lewym menu nawigacyjnym) Sharplub Two+Tone, odpowiednio. Strona wyników będzie wyglądać prawie tak samo za każdym razem, ale adres URL w src:wierszu jest oczywiście inny dla każdego wariantu.

Wreszcie w kroku 1 możesz nawet użyć tego adresu URL:

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

Spowoduje to zwrócenie CSS dla wszystkich wariantów na jednej stronie, która następnie zawiera pięć src:wierszy, z których każdy ma inny adres URL wskazujący, gdzie znajduje się odpowiednia czcionka.

Binarus
źródło

2

Link do czcionek internetowych działa teraz we wszystkich przeglądarkach!

Po prostu dodaj swoje motywy do łącza czcionki oddzielonego pionową kreską ( |), w ten sposób

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

Następnie odwołaj się do klasy w następujący sposób:

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

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

Ten wzór będzie również działał z materiałem kątowym:

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

międzygalaktyczny
źródło

Zachowam to proste podejście, dopóki nie pojawi się rozwiązanie atrybutów. Dobry @intergalactic

Sparker73

Co się stanie, jeśli otrzymam ikony za pośrednictwem dependenciespliku package.json aplikacji zamiast <link>? Nie umieszczam zarysowanych ikon w adresie URL ...

Jago

1

Umieść w nagłówku link do stylów google

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

iw ciele coś takiego

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

Володимир Лук'янюк
źródło

0

Skończyło się na tym, że użyłem aplikacji IcoMoon do stworzenia niestandardowej czcionki, używając tylko nowych ikon tematycznych, których potrzebowałem do ostatniej kompilacji aplikacji internetowej. Nie jest idealny, ale możesz całkiem dobrze naśladować istniejącą funkcjonalność czcionki Google przy odrobinie konfiguracji. Oto napis:

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

Jeśli ktoś czuje się odważny, może przekonwertować cały motyw za pomocą IcoMoon. Do diabła, IcoMoon prawdopodobnie ma wewnętrzny proces, który by to ułatwił, ponieważ mają już oryginalne ikony materiałów ustawione w swojej bibliotece.

Zresztą to nie jest idealne rozwiązanie, ale mi się udało.

Lee Martin
źródło

0

Byłem niezadowolony, że dopóki się nie zorientowałem, Google nie wydało jeszcze swoich nowych projektów jako zestawu czcionek lub ikon svg. Dlatego zestawiłem mały pakiet npm, aby rozwiązać problem.

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

Po prostu zaimportuj ikony, których chcesz użyć, i dodaj je do rejestru. Obsługuje to również potrząsanie drzewem, ponieważ do projektu dodawane są tylko te ikony, które naprawdę chcesz i / lub potrzebujesz.

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

na przykład użyć dwóch ikon tonów

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

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

W swoim szablonie html możesz teraz użyć nowej ikony

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

MarcusCalidus
źródło

0

Nieco przezabawnie Google stworzył czcionkę, która działa poprawnie w Safari, ale nie w Chrome. Oto https://codepen.io/anon/pen/zbavza

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

W odniesieniu do https://stackoverflow.com/a/54902967/4740291 i braku możliwości zmiany koloru za pomocą css.

Kyle Snow Schwartz
źródło

0

Konfigurowanie dwukolorowego koloru:

Jak opisano powyżej, możesz użyć colorklawisza css poza materiałami Motyw dwukolorowy, który wydaje się być glitchy ;-)

Obejście zostało opisane w jednym z kilku problemów z materiałami kątowymi na githubie przy użyciu niestandardowego filtru CSS. Ten niestandardowy filtr można wygenerować tutaj .

Na przykład:

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

Załączniki:

zerocewl
źródło

Jak korzystać z nowych motywów ikony Material Design: konturowy, zaokrąglony, dwukolorowy i ostry?

Odpowiedzi:

Aktualizacja (31.03.2019): Wszystkie motywy ikon działają teraz za pośrednictwem czcionek internetowych Google.

Aktualizacja (14.11.2018): Lista 16 ikon konspektu, które działają z sufiksem „_outline”.

To hack, aby przetestować nowe motywy ikon za pomocą wbudowanego tagu. To nie jest oficjalne rozwiązanie.

Od 12.05.2020 r. Musisz

google CDN

Element ikony

Link do czcionek internetowych działa teraz we wszystkich przeglądarkach!