it-swarm.com.ru

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

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

Outlined, Rounded, Two-Tone и Sharp, в дополнение к обычной теме Filled/Baseline


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


Я был используя его через 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?

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

59
Aj334

Обновление (14/11/2018): список из 16 значков контуров, которые работают с суффиксом _outline.

Вот последний список из 16 значков контуров, которые работают с обычным Web-шрифтом 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 _outlined", а не outline.


Это взломать, чтобы проверить новые темы значков с помощью встроенного тега. Это не официальное решение.

На сегодняшний день (19 июля 2018 г.), спустя чуть более 2 месяцев с момента появления новых тем значков, нет способа включить эти значки с помощью встроенного тега <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">

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


ШАГ 1:

Включите таблицу стилей темы, которую вы хотите использовать ... Например: Для темы «Outlined» используйте таблицу стилей для «outline.css»

ШАГ 2:

Добавьте следующие классы в свою таблицу стилей own:

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

Используйте значок, добавив следующие classes в тег <i>

1) material-icons-new класс 

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

Префиксы: 

Изложено: outline-

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

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

Sharp: sharp-

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

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

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


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

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


Пример: 

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

25
Aj334

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

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

против 

<mat-icon>info_outline</mat-icon>
8
fxrxz

Новые темы, вероятно, (пока?) Не являются частью шрифта Material Icons . https://github.com/google/material-design-icons/issues/773

5
Martin

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

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

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

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

 red round warning material icon in safari

В отношении https://stackoverflow.com/a/54902967/4740291 и невозможности изменить цвет с помощью css.

0
Kyle Snow Schwartz

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

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

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

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

0
Lee Martin

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

0
Edric

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

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

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

Этот шаблон также будет работать с Angular Material:

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