Как использовать новые темы значков дизайна материала: Outlined, Rounded, Two-Tone и Sharp?

171

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

Изложенные, закругленные, двухцветные и острые , в дополнение к обычной теме « Заполненный / базовый» :

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

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

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

А затем с помощью требуемого значка, как предлагается в документации :

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

Но он всегда показывает версию «Filled / Baseline».

Я попытался сделать следующее, чтобы использовать тему Outlined :

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

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

icons material-design google-material-icons Ашил Джон
источник

Ответы:

172

Обновление (31/03/2019): все темы значков теперь работают через Google Web Fonts.

Как отметил Эдрик, теперь нужно просто добавить ссылку на веб-шрифты 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 -х месяцев с момента были введены новые темы иконок, есть No Way включить эти иконки с помощью инлайн тег <i class="material-icons"></i>.

+ Мартин отметил, что на 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">

Каждый из этих файлов содержит значки соответствующих тем, включенных в качестве фоновых изображений (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-

Округлые: round-

Две тонны: twotone-

Sharp: sharp-

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

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

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

Ашил Джон
источник
Здравствуйте! это довольно полезно, но я все еще не могу включить свою иконку, я хочу включить screen_share, я пытался с классом .outline-screen_share, но он печатает все что угодно, я проверяю класс в инспекторе, и он существует, может я потерял любой шаг?
cucuru
1
@cucuru Спасибо, я думаю, что вы пропустили Шаг 2 . .material-icons-newСначала добавьте класс и его свойства в собственную таблицу стилей, а затем вызовите значок <i class="material-icons-new outline-screen_share"></i>.
Ашил Джон
1
Кажется, теперь появились новые шрифты CSS для новых тем значков материалов: codepen.io/Chan4077/pen/bZNyQG
Edric
Большой! Работает как шарм.
Соорья
Для углового материала, вы должны использовать fontSetвместо class. Смотрите ответ Рона Нетцера ниже от 14.08.199.
Расс
32

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

Тем не менее, вы должны создать классы 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

РЕДАКТИРОВАТЬ: По состоянию на 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

Edric
источник
3
Похоже, что colorатрибут CSS в настоящее время не влияет на цвет новых тем значков материалов.
Эдрик
1
Выделенный значок не работает, т.е.? Есть мысли?
Джисмон Томас
1
он вообще не отображается, даже если вы запускаете эту страницу, то есть вы можете видеть, что это просто пустое пространство, в итоге я использовал базовую линию на ie!
Джисмон Томас
Похоже, что colorсвойство поддерживается на всех значках, кроме двухцветных значков. (Проверено на сегодня)
Edric
17

Для углового материала вы должны использовать 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>
...
Рон
источник
12

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

rocaes90
источник
10

Для меня сработало использование _outline, а не _outline d после имени иконки.

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

против 

<mat-icon>info_outline</mat-icon>
fxrxz
источник
Ах-ха, так это работает на Angular; это довольно опрятно.
Ашил Джон
5
Есть некоторые значки, которые являются контурами и имеют суффикс _outline. Это работает только для тех, кто
Sangmin Lee
@SangminLee да, это список иконок, где он должен работать. material.io/tools/icons/?style=outline
fxrxz
@ Aj334 да, аккуратно, можешь ли ты принять этот ответ, если он ответил на твой вопрос?
fxrxz
1
Я просто использовал это с простым веб-шрифтом Material в проекте React.js. Так что это не имеет никакого отношения к Angular. Я думаю, что это решение.
Juuro
9

По состоянию на 05.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>

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

Вано Майсурадзе
источник
Для Angular используйте <mat-icon class="material-icons-two-tone">alarm</mat-icon>. Заменить класс либо material-icons, material-icons-outlined, material-icons-two-tone, material-icons-sharpили material-icons-round. И замените сигнализацию любым именем значка из: material.io/resources/icons/?icon=assessment&style=baseline
Quad Coders
Используя mat-icon означает, что вы добавляете дополнительный модуль, который увеличивает размер приложения (ну, он немного увеличивается, но иногда важно несколько килобайт)
Вано Майсурадзе
@VanoMaisuradze, можете ли вы дать ссылку на документ?
Мехулкумар
AFAIK, нет документов для этого.
Вано Майсурадзе
5

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

Мартин
источник
Этот проект не публиковал релиз в течение 2 лет, я не затаил дыхание.
Coderer
3

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

Ни один из ответов пока не объясняет, как загрузить различные варианты этого шрифта, чтобы вы могли обслуживать их со своего собственного веб-сайта (WWW-сервер).

Хотя это может показаться незначительной проблемой с технической точки зрения, с юридической точки зрения это большая проблема, по крайней мере, если вы намереваетесь представить свои страницы любому гражданину ЕС (или даже, если вы делаете это случайно). Это даже верно для компаний, которые проживают в США (или любой стране за пределами ЕС).

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

Сказав это:

Я скачал все версии (обычные, обведенные, округленные, острые, двухцветные) этого шрифта, выполнив два очень простых шага (ответ @ Aj334 на его собственный вопрос, который поставил меня на правильный путь) (пример: «обрисовал в общих чертах» «вариант»:

  1. Получите CSS из Google CDN, позволяя браузеру получать 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-адресом, указывающим, где находится соответствующий шрифт.

Binarus
источник
2

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

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

<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>
межгалактический
источник
Я буду придерживаться этого простого подхода до тех пор, пока не появится решение для атрибутов. Хороший @intergalactic
Sparker73
Что если я получу значки через dependenciespackage.json приложения вместо <link>? Я не могу включить выделенные значки в URL ...
Jago
1

Вставьте в шапку ссылку на стили Google

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

и в теле как то так 

<i class="material-icons-outlined">bookmarks</i>
Володимир Лук'янюк
источник
0

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

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

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

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

Ли Мартин
источник
0

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

Настройка двухцветного цвета:

Как описано выше, вы можете использовать colorклавишу css, за исключением материалов Двухцветная тема, которая выглядит глючной ;-)

Обходной путь описан в одной из нескольких проблем 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%);
}

Вложения:

zerocewl
источник