Как использовать новые темы "Значки дизайна материалов": "Очерченные", "Округлые", "Два тона" и "Острый"?

Google обновил свои Иконки дизайна материалов с 4 новыми предустановленными темами:

Очерченные, закругленные, двухтонные и острые, в дополнение к обычной теме Filled/Baseline:

Но, к сожалению, он нигде не говорит о том, как использовать новые темы.

Я использовал его через Google Web Fonts, включив ссылку:

<link href="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons'; return false;" 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="#" onclick="location.href='https://fonts.googleapis.com/icon?family=Material+Icons&style=outlined'; return false;" rel="stylesheet">

и т.д. Но это не сработает.

И нет смысла делать снимки в темноте.

tl; dr: Кто-нибудь пытался использовать новые темы? Он работает даже как базовая версия (встроенный тег html)? Или он предназначен только для загрузки в формате SVG или PNG?

Заранее спасибо.

ОТВЕТЫ

Ответ 1

Обновление (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 контурных значков, которые работают с обычным Web-шрифтом Material-icons, используя суффикс _outline (проверено и подтверждено).

(Как указано на странице github material-design-icons. Искать: " _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>.

+Martin указал, что на Github возникла проблема, касающаяся того же: https://github.com/google/material-design-icons/issues/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">

Sharp:

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

Каждый из этих файлов содержит значки соответствующих тем, включенных в качестве изображений backg round- (Base64 image-data). И вот как мы можем использовать это, чтобы проверить совместимость определенного значка в нашем дизайне, прежде чем загружать его для использования в производственной среде.

ШАГ 1:

Включите таблицу стилей темы, которую вы хотите использовать. Например: для темы "Outlined" используйте таблицу стилей для "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-: outline-

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

Двухцветный: twotone-

Резкое: sharp-

Например (для значка "объявление"):

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

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

Изменение размера иконки:

Поскольку это изображение backg round-, а не значок шрифта, используйте свойства height и width CSS, чтобы изменить размер значков. По умолчанию установлено значение 24px в классе material-icons-new.

Пример:

Случай 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: Для Sharp Тема иконы оценки:

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 примет решение для этой проблемы, которое не предполагает загрузку значка для использования.

Ответ 2

По состоянию на 27 февраля 2019 года появились шрифты CSS для новых тем значков материалов.

Тем не менее, вы должны создать классы CSS, чтобы использовать шрифты.

Семейства шрифтов следующие:

  • Изложенные значки Material Icons Outlined - выделенные значки
  • Material Icons Two Tone - Двухцветные иконки
  • Material Icons Round - Округлые иконки
  • Material Icons Sharp - Material Icons Sharp 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>

Ответ 3

Что для меня работало, это использование _outline not _outline d после имени значка.

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

против

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

Ответ 4

Если у вас уже есть значки материалов, работающие в вашем веб-проекте, просто обновите вашу ссылку в 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!

Ответ 5

Новые темы, вероятно, не являются (пока?) Частью шрифта Material Icons. Ссылка

Ответ 6

Для angular материала вы должны использовать fontSet input для изменения семейства шрифтов:

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

Ответ 7

Недавнее редактирование 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>

Ответ 8

Ссылка на веб-шрифты теперь работает во всех браузерах!

Просто добавьте свои темы к ссылке на шрифт, разделенной пробелом (|), вот так

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

Ответ 9

Я закончил использование приложения IcoMoon, чтобы создать собственный шрифт, используя только новые значки, которые мне нужны для недавней сборки веб-приложений. Это не идеально, но вы можете имитировать существующую функциональность Google Font довольно хорошо с небольшим количеством настроек. Вот запись:

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

Если кто-то смеет, они могут преобразовать всю тему, используя IcoMoon. Черт, у IcoMoon, вероятно, есть внутренний процесс, который облегчит работу, поскольку у них уже есть оригинальные значки материалов, установленные в их библиотеке.

Во всяком случае, это не идеальное решение, но это сработало для меня.

Ответ 10

Вы можете использовать этот репозиторий. https://github.com/petergng/materialIconFont

Питер был так добр, чтобы генерировать отдельные шрифты из официальных SVG. Я просто добавил некоторые CSS, чтобы использовать его с Угловым материалом. Дополнительная информация о readme.

Ответ 11

Я был недоволен тем, что до тех пор, пока не узнаю, что 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>

Ответ 12

Несколько забавно, Google сделал шрифт, который работает правильно в Safari, но не в Chrome. Здесь https://codepen.io/anon/pen/zbavza

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

red round warning material icon in safari

Ссылка на fooobar.com/info/15671903/... и невозможность изменить цвет с помощью css.