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 <i class="material-icons"></i>.
+ 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<i> :
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.
