Google оновив свої Значки дизайну матеріалів за допомогою 4 нових попередньо заданих тем:

Окреслені, закруглені, двоколірні та різкі , на додаток до звичайної теми " Заповнені / базові лінії ":

Але, на жаль, ніде не сказано, як використовувати нові теми.

Я використовував його через веб-шрифти Google , включивши посилання:

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

А потім, використовуючи необхідний значок, як це запропоновано в документації :

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

Але він завжди показує версію "Заповнений / базовий рівень".

Я спробував зробити наступне , щоб використовувати намітилася тему натомість:

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

і, змінивши посилання веб-шрифтів на:

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

і т.д. Але це не працює.

І немає сенсу робити такі постріли в темряві.

tl; dr: Хто-небудь намагався використовувати нові теми? Це навіть працює як базова версія (вбудований html-тег)? Або це призначено лише для завантаження у форматі SVG чи PNG?

Заздалегідь спасибі.

Оновлення (31.03.2019): Усі теми значків зараз працюють через веб-шрифти Google.

Як зазначає Едрік, зараз просто питання додати посилання на веб-шрифти google у голову документа, як-от так:

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

А потім додавання правильного класу для виведення піктограми певної теми.

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

Колір піктограм можна також змінити за допомогою CSS.

Примітка. Двоколірна піктограма теми в даний час трохи глянцева.

Оновлення (14.11.2018): Список 16 піктограм контуру, які працюють із суфіксом "_outline".

Ось останній список із 16 піктограм контуру, які працюють із звичайним веб-шрифтом Material-icons, використовуючи суфікс _outline (перевірений та підтверджений).

(Як знайдено на сторінці матеріалів-дизайну-ікон github . Шукати: " _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> 

Зауважте, що pie_chart має бути " pie_chart_ окреслено ", а не контур .

Це хак для тестування нових тем значків за допомогою вбудованого тегу. Це не офіційне рішення.

На сьогодні (19 липня 2018 р.) З моменту введення нових тем піктограм трохи більше ніж 2 місяці, немає жодного способу включити ці значки за допомогою вбудованого тегу <i class="material-icons"></i>.

+ Мартін зазначив, що в Github виникає проблема щодо того ж: https://github.com/google/material-design-icons/isissue/773

Тому, поки Google не знайде рішення для цього, я почав використовувати хак для включення цих нових тем значків у моє середовище розробки, перш ніж завантажувати відповідні піктограми у вигляді SVG чи PNG. І я думав, що поділюся з усіма вами.

ВАЖЛИВО : Не використовуйте це у виробничому середовищі, оскільки кожен із включених файлів CSS від Google розміром понад 1 Мб.

Google використовує ці таблиці стилів для демонстрації піктограм на їх демо-сторінці:

Контур:

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

Округлені:

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

Двоколірний:

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

Різко:

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

Кожен з цих файлів містить піктограми відповідних тем, що містяться як фонові зображення (зображення Base64). Ось як ми можемо скористатися цим, щоб перевірити сумісність певного значка в нашому дизайні, перш ніж завантажувати його для використання у виробничому середовищі.

КРОК 1 :

Включіть таблицю стилів теми, яку ви хочете використовувати. Напр .: Для теми "Накреслено" використовуйте таблицю стилів для "outline.css"

КРОК 2 :

Додайте такі класи до власного таблиці стилів:

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

Використовуйте значок, додавши наступні класи в<i> тегу :

1) material-icons-newклас

2) Назва піктограми, як показано на демонстраційній сторінці значків матеріалів із префіксом назви теми, а потім дефісом.

Префікси:

Окреслено: outline-

Округлені: round-

Двоколірний: twotone-

Різко: sharp-

Напр. (Для піктограми "оголошення"):

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

3) Використовуйте додатковий 3-й клас icon-whiteдля перетворення кольору з чорного на білий (для темних фонів)

Зміна розміру піктограми:

Оскільки це фонове зображення, а не піктограма шрифту, використовуйте властивості heightі widthвластивості CSS для зміни розміру піктограм. У material-icons-newкласі за замовчуванням встановлено 24px .

Приклад:

Випадок I: для окресленої теми піктограми account_circle :

1) Включіть таблицю стилів:

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

2) Додайте тег значків на свою сторінку:

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

Необов’язково (для темних фонів):

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

Випадок II: Для гострої теми значка оцінки :

1) Включіть таблицю стилів:

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

2) Додайте тег значків на свою сторінку:

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

(Для темних фонів):

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

Я не можу підкреслити, що це НЕ ПРАВИЛЬНИЙ ШЛЯХ для включення піктограм у виробниче середовище. Але якщо вам потрібно сканувати декілька піктограм на вашій сторінці в процесі розробки, це робить включення значка досить простим і економить багато часу.

Завантаження піктограми у форматі SVG або PNG впевнено - це кращий варіант, коли мова йде про оптимізацію швидкості сайту, але піктограми шрифту - це економія часу, коли справа доходить до фази прототипування та перевірки, чи відповідає певна піктограма з вашим дизайном тощо.

Я оновлю цю публікацію, якщо і коли Google придумає рішення цієї проблеми, яке не передбачає завантаження піктограми для використання.

Станом на 27 лютого 2019 року існують шрифти CSS для нових тем Material Icon.

Однак для створення шрифтів вам потрібно створити CSS-класи.

Сімейства шрифтів такі:

• Material Icons Outlined - Викладені іконки
• Material Icons Two Tone - Двоколірні значки
• Material Icons Round - Округлені значки
• Material Icons Sharp - Різкі значки

Дивіться приклад коду нижче для прикладу:

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>

Або переглянути його на Codepen

EDIT: Станом на 10 березня 2019 року, здається, зараз існують класи для нових піктограм шрифту:

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: Ось вирішення тонування двоколірних піктограм за допомогою фільтрів зображень CSS (код адаптований з цього коментаря ):

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>

Або переглянути його на Codepen

Для кутового матеріалу слід використовувати введення fontSet для зміни сімейства шрифтів:

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

Якщо у вас вже є іконки з матеріалами, які працюють у вашому веб-проекті, просто потрібно оновити свою посилання у файлі html та використовуваному класі для іконок:

HTML посилання:

До цього

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

Після

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

клас іконок матеріалів:

Після цього просто перевірте, який клас className ви використовуєте:

Перед:

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

Після:

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

що працює для мене ... Pura vida!

Що для мене працювало - це використовувати _outline не _outline d після імені іконки.

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

проти

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

Станом на 12.05.2020 р. Вам потрібно

1. включайте 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. Використовуйте його так:

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

Примітка. Наприклад, щоб використовувати окреслений стиль, потрібно вказати значки-матеріали І матеріал-іконки окреслених класів.

Нові теми, ймовірно, не є (ще?) Частиною шрифту Material Icons. Link .

Останні редагування Aj334 прекрасно працюють.

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

Елемент значок

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

Жодна з відповідей поки не пояснює, як завантажувати різні варіанти цього шрифту, щоб ви могли їх обслуговувати з вашого власного веб-сайту (WWW-сервер).

Хоча це може здатися незначним питанням з технічної точки зору, це велике питання з юридичної точки зору, принаймні, якщо ви маєте намір представити свої сторінки будь-якому громадянину ЄС (або навіть, якщо ви зробите це випадково). Це стосується навіть компаній, які проживають у США (або будь-якій країні за межами ЄС).

Якщо когось цікавить, чому це так, я оновлю цю відповідь і дам тут більше деталей, але на даний момент я не хочу витрачати занадто багато місця на тему.

Сказавши це:

Я завантажив усі версії (звичайні, окреслені, закруглені, різкі, двоколірні) цього шрифту, виконавши два дуже легких кроки (це відповідь @ Aj334 на його власне запитання, яке поставило мене на правильний шлях) (приклад: "окреслено "варіант):

1. Отримайте CSS з CDN Google, безпосередньо дозволивши браузеру отримати URL-адресу CSS , тобто скопіюйте таку URL-адресу в рядок розташування браузера:

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

   Це поверне сторінку, яка буде приблизно такою (принаймні, у Firefox 70.0.1 на момент написання цього):

   /* 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:наведеного вище коду, і дозвольте вашому браузеру отримати URL-адресу, що міститься в цьому рядку , тобто скопіюйте таку URL-адресу в рядок розташування вашого браузера:

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

   Тепер браузер завантажить цей .woff2файл і запропонує зберегти його локально (принаймні, це зробив Firefox).

Два заключні зауваження:

Звичайно, ви можете завантажити інші варіанти цього шрифту, використовуючи той самий метод. На першому кроці просто замініть послідовність символів Outlinedу URL на послідовності символів Round(так, насправді, хоча тут вона називається "Округлена" в лівому навігаційному меню), Sharpабо Two+Tone, відповідно. Сторінка результатів буде виглядати майже однаково кожен раз, але URL-адреса в src:рядку звичайно відрізняється для кожного варіанту.

Нарешті, на кроці 1 ви навіть можете використовувати цю URL-адресу:

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

Це поверне CSS для всіх варіантів на одній сторінці, яка потім містить п'ять src:рядків, у кожному з яких інша URL-адреса, що вказує, де знаходиться відповідний шрифт.

Посилання webfonts працює зараз у всіх браузерах!

Просто додайте свої теми до посилання шрифту, розділеного трубою ( |), як це

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

Тоді посилайтесь на клас, наприклад:

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

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

Ця модель також буде працювати з кутовим матеріалом:

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

Помістіть посилання на google стилі

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

а в тілі щось подібне

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

У кінцевому підсумку я використовував додаток IcoMoon для створення спеціального шрифту, використовуючи лише нові тематичні значки, необхідні для недавньої збірки веб-додатків. Це не ідеально, але ви можете досить імітувати існуючий функціонал Google Font, трохи налаштувавши його. Ось запис:

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

Якщо хтось відчуває сміливість, він може перетворити всю тему за допомогою IcoMoon. Пекло, IcoMoon, ймовірно, має внутрішній процес, який полегшить його, оскільки вони вже мають оригінальні Іконки Матеріали, встановлені у своїй бібліотеці.

У будь-якому випадку це не ідеальне рішення, але воно працювало для мене.

Я був незадоволений тим, що поки не знаю, Google ще не випустив свої нові конструкції як набір іконок шрифту або svg. Тому я зібрав невеликий пакет npm для вирішення проблеми.

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

Просто імпортуйте піктограми, які ви хочете використовувати, і додайте їх до свого реєстру. Це також підтримує струшування дерев, оскільки до вашого проекту додаються лише ті значки, які вам дуже потрібні та / або потрібні.

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

наприклад, використовувати два значки тону

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

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

Тепер у вашому HTML-шаблоні ви можете використовувати новий значок

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

Дещо весело, Google створив шрифт, який працює правильно в Safari, але не в Chrome. Ось https://codepen.io/anon/pen/zbavza

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

Посилаючись на https://stackoverflow.com/a/54902967/4740291 та не в змозі змінити колір за допомогою css.

Налаштування двоколірного кольору:

Як описано вище, ви можете використовувати клавішу colorcss, за винятком матеріалів Двоколірна тема, яка, здається, глюковата ;-)

Вирішення описано в одному з декількох кутових матеріалів випуску github за допомогою спеціального фільтра css. Цей спеціальний фільтр можна створити тут .

Наприклад:

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

Додатки:

• Робочий кутовий стекбліц
• Приклад Codepen
• Генератор фільтрів Codepen CSS