Содержание
Импорт значков material design в проект android
Есть ли простой способ импортировать все значки репозитория Material Design icons в проект android без риска сделать это вручную?
icons
material-design
Поделиться
Источник
Ivan Aranibar
23 февраля 2015 в 22:29
5 ответов
- Использование значков material design и Angular Material SVG
Я хочу использовать Angular Material с значком Material Design Icon … (без значков шрифта, но SVG) Но я не знаю, как это сделать… HTML: <!— Icon ID; may contain optional icon set prefix; —> <!— icons must registered using $mdIconProvider — OK, but doesn’t work —> <md-icon…
- Каков рекомендуемый размер значка ActionBar в Material Design (Android API 21+)?
Прежде всего, этот вопрос связан с тем, насколько большими должны быть значки панели действий(панели инструментов) в новом Android Material design? В соответствующем вопросе ясно, что размер сенсорной цели значков панели действий должен быть 48dp. Я хотел бы прояснить пару вещей относительно этих…
395
Взгляните на Vector Asset Studio
Выполните следующие действия, чтобы запустить Vector Asset Studio:
- В Android Studio откройте проект приложения Android.
- В окне Проекта выберите представление Android.
- Щелкните правой кнопкой мыши папку res и выберите Создать > Векторный ресурс.
После открытия Vector Asset Studio вы можете добавить значок материала следующим образом:
- Выберите «Material Icon» (нажав на картинку клипа: ICON)
- Нажмите кнопку Выбрать
- Выберите значок материала
Поделиться
mpkuth
16 января 2016 в 00:27
Поделиться
Ouss StinGray
27 февраля 2015 в 13:14
23
В папке drawable
> right click
> new
> vector asset
нажмите на значок:
Поделиться
Dale
15 июня 2019 в 15:46
- Android Material Design не поддерживается в старых версиях
Я делаю проект android, который должен поддерживать все устройства android версии 2.2(froyo) и выше. Я пытаюсь использовать android material design в своем проекте. Чтобы поддержать material design в более старых версиях, я добавил приведенное ниже утверждение в gradle dependencies { compile…
- В чем разница между Android Material Design UI и Android UI без material design?
Я работаю над приложением android. Я собираюсь разработать пользовательский интерфейс, и я должен использовать в нем material design. Я хочу знать, в чем разница между Android Material Design UI и Android UI без material design ? Как я должен использовать material design в своем приложении?
6
Вот скрипт, который клонирует репозиторий github значков
material design в
https://github.com/google/material-design-icons
и создает индекс всех файлов. Он также копирует файлы svg в подкаталоги по категориям. Вы можете использовать это в качестве основы для копирования файлов, которые вас интересуют, в свой проект — просто измените инструкцию find и cp copy по своему вкусу. Если вам, например, нужны png определенного размера — они находятся в соседних каталогах, и вам нужно соответствующим образом изменить команду find и copy.
#!/bin/bash
# WF 2016-06-04
# get google material design icons
# see http://stackoverflow.com/questions/28684759/import-material-design-icons-into-an-android-project
tmp=/tmp/icons
index=$tmp/index.html
mkdir -p $tmp
cd $tmp
if [ ! -d material-design-icons ]
then
git clone https://github.com/google/material-design-icons
fi
cat << EOF > $index
<html>
<head>
<head>
<body>
<h2>Google Material Design Icons</h2>
EOF
for icon in `find . -name *.svg | grep production | grep 48`
do
svg=`basename $icon .svg`
category=`echo $icon | cut -f3 -d '/'`
echo $category $svg.svg
mkdir -p $tmp/$category
cp $icon $tmp/$category
echo " <img src='"$icon"' title='"$category $svg"' >" >> $index
done
cat << EOF >> $index
</body>
</html>
EOF
Поделиться
Wolfgang Fahl
04 июня 2016 в 05:22
2
Я нашел эту ссылку полезной для себя.
https://dev.materialdesignicons.com/начало работы/android
gradle реализация доступна
dependencies {
implementation 'net.steamcrafted:materialiconlib:1.1.5'
}
После добавления зависимости gradle вы можете создать пункт меню таким образом.
<menu xmlns:android="http://schemas.android.com/apk/res/android"
xmlns:app="http://schemas.android.com/apk/res-auto" <!-- important, you'll have to include this to use the custom xml attributes -->
xmlns:tools="http://schemas.android.com/tools" >
<!-- example of a menu item with an icon -->
<item
android:title="Disable Wifi"
app:showAsAction="always"
app:materialIcon="wifi_off" <!-- This sets the icon, HAS AUTOCOMPLETE ;) -->
app:materialIconColor="#FE0000" <!-- Sets the icon color -->
/>
</menu>
Поделиться
Naveed Jamali
16 апреля 2019 в 10:49
Похожие вопросы:
Android Material Design
Поддерживает ли новый Android Material Design старую версию android, такую как 3.0 или 2.1? если он поддерживает, как бы это выглядело? как настоящий material design или такой же старый дизайн? Я…
Установить цвет фона значков SVG Material Design
Я использую значки Material Design, используя метод, описанный здесь: https://github.com/google/material-design-icons#using-svg-sprites Однако значки всегда заканчиваются черным. Как мне изменить их…
как добавить material design иконок-шрифт в приложение Android
В моем приложении есть много мест, где я должен программно Добавлять значки в свои текстовые представления. На сайте Android material design я видел, что вы можете использовать шрифты значков, но…
Использование значков material design и Angular Material SVG
Я хочу использовать Angular Material с значком Material Design Icon … (без значков шрифта, но SVG) Но я не знаю, как это сделать… HTML: <!— Icon ID; may contain optional icon set prefix;…
Каков рекомендуемый размер значка ActionBar в Material Design (Android API 21+)?
Прежде всего, этот вопрос связан с тем, насколько большими должны быть значки панели действий(панели инструментов) в новом Android Material design? В соответствующем вопросе ясно, что размер…
Android Material Design не поддерживается в старых версиях
Я делаю проект android, который должен поддерживать все устройства android версии 2.2(froyo) и выше. Я пытаюсь использовать android material design в своем проекте. Чтобы поддержать material design…
В чем разница между Android Material Design UI и Android UI без material design?
Я работаю над приложением android. Я собираюсь разработать пользовательский интерфейс, и я должен использовать в нем material design. Я хочу знать, в чем разница между Android Material Design UI и…
Использование значков Material Design в проектах Flutter
Из-за отсутствия иконок в классическом пакете значков материалов я хотел бы использовать иконки Material Design. Что касается pubspec.yaml , то я добавил следующую зависимость:…
Новые темы значков Material Design — настройка цвета
Я ищу портативное решение для раскрашивания некоторых иконок. Моя первоначальная проблема, описанная ниже, проявляется в Chrome и Firefox на моем MacBook, в Safari цвета работают так, как ожидалось….
Используйте библиотеку значков Material design в FloatingActionButton
Я создаю приложение, которое использует FloatingActionButton со значком+, и я использую библиотеку значков Materian Design Для добавления значков. Есть ли какой-нибудь способ использовать значок…
Material Design — изучаем вдоль и поперёк
Впервые материальный дизайн пришел к нам вместе с выходом в свет Android 5.0 Lollipop. Это стало самым крупным обновлением за всю историю развития системы. И сегодня даже TouchWiz, работающий на новом Android, выглядит не так уж и плохо. До выхода пятой версии было много мыслей относительно будущего дизайна, все знали — изменения будут существенные, тем более уже тогда на рынке была представлена iOS 7, и чтобы не отставать, Google в любом случае должна была сделать определенный рывок в области развития своей системы.
Однако никто не ожидал, что мы увидим именно такое. Как я помню, iOS 7 при первом взгляде вызвал некое странное удивление, несравнимое с радостью, это было просто странно. Однако когда нам впервые показали новый Android, я моментально сказал: «Это то, чего никто не ждал, и это то, что сделает многих владельцев Android счастливыми, в том числе и меня».
Первый раз мне удалось познакомиться с «леденцом» в момент его установки на свой девайс. Одно дело — картинки, другое — когда ты в реальности ощущаешь всю красоту интерфейса. И моей радости на тот момент не было предела.
Со временем, конечно, анимации стали немного мешать, поэтому мне пришлось всё же откатиться до Sense 5, впрочем, Android для меня от этого хуже не стал. Это всё еще лучшая система на рынке сегодня.
Однако давайте взглянем на неё более подробно. Вся суть нового дизайна напрямую связана с реальной жизнью. Поведение теней, которые отбрасывают листы бумаги и различные материалы — всё это было реализовано и в Android. Каждый элемент в системе не может быть объёмным, точнее, он объёмный, но этот показатель не должен превышать 1 dp (dp позволяет приложениям выглядеть одинаково на различных экранах и разрешениях). Также существует показатель расстояния между поверхностью и нашим элементом. Как правило, кнопки располагают на высоте 6 dp, карточки — 2 dp, верхние бары — 4 dp.
Немалую роль играют и анимации. Различные элементы, такие как три полоски меню, могут быть преобразованы в стрелку, «Стоп» квадрат в треугольник. Маленькие объекты должны двигаться быстрее, большие — медленнее, дабы создать эффект лёгкости небольших и тяжести больших, соответственно.
Иконки приложений также должны быть выполнены в определенном стиле. На её элементы должна отбрасываться тень, создавая эффект источника света.
Немного поговорим и о кнопках. Кнопки в Android 5.0 могут быть трех видов. Первые — это так называемые «Floating Action Buttons», которые являются главными кнопками приложений и могут быть объявлены только один раз на одном окне. Например, всем полюбившаяся кнопка «+». Второй тип — это «Raised Buttons», то есть обычные объёмные кнопки с тенями. И третий тип «Flat Buttons» — плоские кнопки, то же, что и «Raised Buttons», но в плоском варианте без теней.
Информация на главном экране также может быть представлена в виде карточек, которые в ширину должны быть всегда одного размера, а вот высота может быть различна. Достаточно удобно.
Таким образом, Android представляет собой уникальное дизайнерское решение, технически выполненное на очень высоком уровне. Нет сомнения в том, что Android является как минимум лучшим представителем всех мобильных операционных систем.
Лучшие бесплатные ресурсы иконок в стиле Material Design
Оригинал: 10 Best Free Material Design Icons Resources in 2018 for Inspiration
Дизайнерская платформа Material Design предоставляет разработчикам стандарты для создания вебсайтов и приложения с единым интерфейсом. От общего интерфейса — до мельчайших деталей в Google доказали, что это цифровое совершенство. Иконки играют в этом всем большую роль, ведь в материальном дизайне иконки играют роль значимых обозначений, которые способны заменить от 1 до 4 слов! Автор хотел бы поделиться 10 лучшими бесплатными источниками исконок в стиле MD. Просто выбирайте правильные и интегрируйте их в свой дизайн!
1. Google Material Design Icons — Google Material Icons
Форматы: PNG, SVG
Цена: Бесплатно
Применимы: Веб, Android, iOS
Особенности:
- Более 900+ иконок
- Могут быть использованы как из серверов Google Web Font , так и самостоятельно
- Поддерживают все современные браузеры
- Могуть быть окрашены, размещены и изменены при помощи CSS
- Основаны на векторе, а значит отлично смотрятся при любом масштабе
Иконки на первом сайте
Данный сайт предлагает более 900 превосходных иконок. Они доступны в различных размерах, стилях и как веб-шрифт. Материальные иконки отлично продуманы и просты в использовании в веб, Android или iOS проектах.
2. Material Icons from Icons8 — Material Design Social Icons
Форматы: PNG, SVG (в любом формате)
Цена: В основном бесплатно (некоторые функции платные)
Применимы: Приложения для Веба, Android или iOS
Особенности:
- Сравнение материальных иконок с другими стилями
- Единый стиль. Все иконки сделаны одним дизайнером, так что Ваш пользовательский интерфейс будет выглядеть согласовано
- Редактирование векторов (платно)
- Генератор шрифтов из избранных иконок (платно)
- Перекрашивание иконок. Выберите цвет, и сайт сгенерирует соответствующие версии вашей иконки
- Встраиваемость в HTML. Вы можете получить код для размещения иконом прямо в вашем HTML
- Mac & Win приложения позволяют быстро искать нужные иконки и отлично работают с Фотошопом
Ведем поиск!
Вы получите доступ к 4,400 материльных иконок в любом формате, размере и цвете за 20 секунд. Тут есть социальные иконки, вроде Facebook, Twitter, Youtube и все виды стрелочек. Так же есть стандартные, вроде домой, телефон, настройки. Ищете что-то оригинальное? Вам сюда!
3. Material Design Icons
Форматы: PNG, SVG, XAML
Цена: Бесплатно
Применимы: Все системы
Особенности:
- Бесплатные обновления
- Поддержка раздельной загрузки
- Доступны веб-шрифты
- Векторные иконки, включая линии и сплошные
- Поддерживает открытый исходный код
Их все больше!
Эта библиотека содержит около 4000 бесплатных иконок, включая коллекции различных дизайнеров, которые деляться результатами своих дизайнерских работ. Наведя на иконку можно узнать имя иконки и её дизайнера.
4. Materialpalette
Форматы: PNG, SVG
Цена: Бесплатно
Применимы: iOS и Android
Особенности:
- 16 типов, включая материальную иконку поиска и материальную иконку меню
- Множественная загрузка бесплатно
- Основаны на векторе, а значит отлично смотрятся при любом масштабе
Тоже красиво
Данная библиотека предлагает типчные бесплатные иконки в материальном стиле. На странице есть поиск для быстрого получения того, что Вам нужно. Так же на сайте можно выбрать цвет иконок.
5. Materializecss
Форматы: PNG, SVG
Цена: Бесплатно
Применимы: Все системы
Особенности:
- Возможность импорта библиотеки для использования в HTML коде
- Для контроля размера укажите font-size: 30px
Удобный, материальный, а что еще нужно?
Сайт предлагает 932 иконки в стиле материального дизайна от Google. Иконки могут быть использованы для прототипов дизайна и напрямую в разработке прилоений.
Кстати, вот небольшая презентация иконок в HTML:
add
insert_chart
insert_chart
airplanemode_inactive
all_inclusive
archive
bluetooth_searching
6. Noun Project
Форматы: PNG, SVG
Цена: Бесплатно/PRO
Применимы: Все системы
Особенности:
- Огромная база, изображения на любой вкус. Доступны в чёрном цвете и без возможности непосредственного редактирования на сайте. Для получения последнего необходим PRO доступ.
- Лицензия Creative Commons CCBY, а значит указываем авторов загруженных иконок.
Главная страница
Один из самых полезных ресурсов для более конкретного поиска картинок. Другие даже близко не предлагают подобного разнообразия, что делает Noun моим фаворитом, на данный момент.
Вам нужен кот?
Material Design для Android | Разработчики Android
Материальный дизайн — это исчерпывающее руководство по визуализации, движению и
дизайн взаимодействия между платформами и устройствами.
Чтобы использовать материальный дизайн в своих приложениях для Android, следуйте определенным рекомендациям.
в спецификации материального дизайна и использования
новые компоненты и стили, доступные в поддержке материального дизайна
библиотека. На этой странице представлен обзор шаблонов и API, которые вам следует использовать.
Android предоставляет следующие функции, которые помогут вам создавать приложения для материального дизайна:
- Тема приложения Material Design для стилизации всех ваших виджетов пользовательского интерфейса
- Виджеты для сложных представлений, таких как списки и карточки
- Новые API для пользовательских теней и анимации
Тема материала и виджеты
Чтобы воспользоваться преимуществами материальных возможностей, таких как стиль для стандартного пользовательского интерфейса.
виджеты, а чтобы оптимизировать определение стиля вашего приложения, примените
тема на основе материалов в ваше приложение.
Для получения дополнительной информации см.
применить материальную тему.
Чтобы предоставить пользователям привычный опыт, используйте наиболее распространенные UX-шаблоны материала:
По возможности используйте заранее определенные значки материалов. Например,
Кнопка «меню» навигации для панели навигации должна использовать стандартный «гамбургер»
икона. См. В разделе «Значки дизайна материалов» список
доступные значки. Вы также можете импортировать значки SVG из библиотеки значков материалов с помощью
Векторный объект Android Studio
Студия.
Тени и карты высот
Помимо свойств X и Y, представления в Android имеют Z
свойство. Это новое свойство представляет высоту вида, которая определяет:
- Размер тени: виды с более высокими значениями Z отбрасывают более крупные тени.
- Порядок рисования: виды с более высокими значениями Z отображаются поверх других видов.
Отметка высоты часто применяется, когда ваш макет включает карточный макет, который
помогает отображать важные фрагменты информации внутри карточек, которые придают материальный вид.Вы можете использовать виджет CardView
для создания карточек с
высота по умолчанию. Для получения дополнительной информации см.
Создайте макет на основе карточек.
Для получения информации о добавлении отметки к другим видам,
см. Создать
Тени и виды клипов.
Анимации
Новые API анимации позволяют создавать пользовательские анимации для сенсорной обратной связи в элементах управления пользовательского интерфейса,
изменения в состоянии просмотра и переходы между действиями.
Эти API позволяют:
- Отвечайте на события касания в ваших представлениях с помощью анимации обратной связи касания .
- Скрытие и отображение видов с помощью круговых отображений анимаций.
- Переключайтесь между действиями с помощью настраиваемых анимаций перехода между действиями и .
- Создавайте более естественные анимации с помощью изогнутого движения .
- Анимируйте изменения в одном или нескольких свойствах вида с помощью анимации изменения состояния вида .
- Показывать анимацию в чертежах списка состояний между изменениями состояния просмотра.
Анимация обратной связи при касании встроена в несколько стандартных представлений, например в кнопки.Новые API
позволяют настраивать эти анимации и добавлять их в свои собственные представления.
Для получения дополнительной информации см. Обзор анимации.
Рисунки
Эти новые возможности для чертежей помогут вам реализовать приложения для материального дизайна:
- Векторные чертежи масштабируются без потери четкости и идеальны
для одноцветных значков в приложении. Узнайте больше о векторных рисунках. - Рисуемое тонирование позволяет определять растровые изображения как альфа-маску и тонировать их с помощью
цвет во время выполнения.Посмотрите, как добавить оттенок к чертежам. - Извлечение цвета позволяет автоматически извлекать заметные цвета из
растровое изображение. Посмотрите, как выбирать цвета с помощью
Палитра API.
7000+ иконок Material Design — окончательный обзор иконок
Ищете качественные Иконки материального дизайна для ваших проектов? Мы собрали огромный список значков материального дизайна, которые вы можете интегрировать в свои будущие проекты.
Иконки занимают особое место в любом дизайне, поскольку они являются визуальным выражением различных действий, инструментов, продуктов, услуг и т. Д.Вы можете интегрировать эти иконки материального дизайна в различные проекты, а также их дизайн соответствует последним тенденциям. Произведите впечатление на ваших пользователей этими привлекательными изображениями значков. Вы найдете множество векторных иконок с бесшовным или анимированным дизайном, созданных опытными дизайнерами.
Эта статья включает в себя огромную коллекцию, и каждый найдет что-то для себя. Загрузите их в различных форматах в соответствии с вашими требованиями. Более того, их дизайн охватывает множество различных ниш и варьируется от моды, людей, еды и напитков до Интернета и социальных сетей.
Это большой набор, который включает 432 иконки материального дизайна из Photoshop. Эти дизайны можно скачать и использовать бесплатно.
Здесь у вас большой пакет из 840 иконок материального дизайна, доступных в формате PNG. К ним относятся значки социальных сетей, стрелки, службы и т. Д.
Эти значки были созданы Jiangping Hsu, их можно загрузить в формате PSD. Вы можете использовать их для панелей действий в качестве значков запуска.
Эти иконки Google Material Design были созданы специально для приложения Sketch.Взгляните на все и посмотрите, пригодятся ли эти дизайны в ваших проектах.
Здесь у вас есть большой набор из 425 иконок, которые вы можете использовать в PowerPoint и Keynote. Вы можете масштабировать и изменять их цвета, чтобы они соответствовали вашему стилю.
Это замечательная коллекция, которая включает в себя хорошо продуманные материальные иконки. Вы можете скачать их в различных форматах файлов, таких как PNG, PSD и AI.
Эти 250 иконок материального дизайна могут быть легко интегрированы в ваши проекты Sketch.Ознакомьтесь с ними и посмотрите, сможете ли вы использовать их в своих текущих проектах.
Здесь вы найдете различные шаблоны значков материального дизайна, которые вы можете интегрировать в свои текущие или будущие дизайны.
Это еще один массивный набор из 435 иконок материального дизайна. Вы можете скачать эти элементы в формате Sketch и SVG.
Эти системные значки были созданы Валмиром Карвалью. По ссылке ниже вы найдете 20 красивых иконок в форматах Sketch и PNG.
Вот 900 иконок материального дизайна, которые можно сразу использовать. У них простой, но потрясающий дизайн, который произведет впечатление на ваших пользователей.
Здесь у вас есть хороший набор анимированных значков SVG, которые вы можете использовать в своих проектах. Перейдите по ссылке ниже и посмотрите, как они трансформируются.
Это прекрасная коллекция из более чем 1900 иконок материального дизайна. Этот пакет включает в себя многоцелевой дизайн значков, и они бывают разных форматов, цветов и размеров.
Посмотрите на эти потрясающие иконки PSD-материалов, которые вы можете бесплатно скачать и использовать в своих проектах. Они имеют красочный детализированный дизайн и будут потрясающе смотреться в ваших проектах.
Здесь вы найдете аккуратный набор полезных шаблонов значков для материального дизайна, которые вы можете использовать для создания своих собственных элементов.
Эта коллекция включает 12 красивых иконок материального дизайна, связанных с сервером и хостингом. Вы можете скачать их в форматах PSD или PNG и бесплатно использовать как в личных, так и в коммерческих проектах.
Это пара анимированных карт Google и значков просмотра улиц, которые вы можете использовать в своих текущих или будущих проектах.
Здесь у вас есть красивый набор иконок углового дизайна материалов, которые вы можете скачать и использовать бесплатно. Эти предметы имеют детальный дизайн с красивыми цветами.
Эти иконки материального дизайна представлены в векторном формате, что делает их идеальными для любого проекта, независимо от его размера. Вы можете выбирать из более чем 420 бесплатных файлов в форматах SVG, PNG, PSD и других форматах.
Google Material Design Icons Введение
Здесь мы изучим значки материалов Google на примере, настройку значков дизайна материалов Google, изменение стиля / цвета значков материалов, изменение размера / размера шрифта значков материалов Google на примере.
Значки Google Material Design
Значки материального дизайна представлены Google в соответствии с рекомендациями по материальному дизайну, и эти значки просты, современны, масштабируемы и иногда необычны.Мы можем легко изменить стиль / цвет / положение значков материалов, используя свойства css.
Настройка значков материалов Google
Чтобы настроить значки Google Material, нам не нужно включать какие-либо файлы сценариев, просто добавив один файл CSS на наш веб-сайт, мы можем использовать все значки Google Font.
Чтобы использовать значки материалов Google на веб-сайте, скопируйте и вставьте следующий файл css в раздел
вашего веб-сайта.
После того, как мы добавим указанный выше файл CSS на наш веб-сайт, будут вызваны значки материалов CSS для активации шрифта Material Icons
, специфичного для браузера.
Нам нужно добавить material-icons
css class во встроенный тег
или
и вставить имя значка для рендеринга этих значков из веб-шрифта. Вот небольшой пример отображения значка лица .
лицо
Пример значков материалов Google
Значки материалов Google предназначены для использования со встроенными элементами
или
. Для этих значков широко используются элементы
или
. В следующем примере показано, как использовать значки материалов на веб-сайте.
Предварительный просмотр
лицо
будильник
android
Если вы посмотрите на пример выше, мы добавили три иконки: лицо пользователя, будильник и андроид. Теперь запустим и посмотрим на результат.
Пример вывода значков материалов Google
Ниже приведен результат примера значков материалов Google.
лицо сигнализация android
Изменить стиль значков Google Mater
Мы можем изменить стиль значков, например увеличить размер шрифта, цвет и т. Д., Используя свойства CSS, как показано ниже.
Предварительный просмотр
important_devices
important_devices
important_devices
Если вы посмотрите на пример выше, мы меняем стиль значков, увеличивая размер шрифта и меняя цвет значка.
Вывод изменения стиля значков материалов Google
Ниже приведен результат изменения стиля значков материалов Google.
important_devices important_devices important_devices
Изменить размер значков материалов Google
По умолчанию размер значков материального дизайна будет 24px
. В случае, если мы хотим изменить размер шрифта значков, мы можем изменить его на любой размер, но в соответствии с рекомендациями по значкам материального дизайна, рекомендуемые размеры будут либо 18
, 24
, 36
или 48 пикселей
.В следующем примере показано, как использовать значки разных размеров.
Предварительный просмотр
important_devices
important_devices
important_devices
important_devices
Если вы видите пример выше, мы меняем размер значков материалов, определяя размер шрифта в классах.
Вывод изменения размера значков материалов Google
Ниже приведен результат изменения размера значков материалов Google.
important_devices important_devices important_devices important_devices
Вот как мы можем использовать значки материалов Google в веб-приложениях, и мы можем настраивать значки, используя свойства css в соответствии с нашими требованиями.
Как использовать значки Material Design в Android
Иконки — одна из важных частей в разработке приложений.Разработчику сложно быстро найти иконки разных размеров и цветов. В этом уроке мы научимся добавлять плагин Material Design icons в студию Android. В конце этого руководства мы легко сможем добавлять значки в наши приложения для Android.
Итак, давайте начнем со свежего студийного проекта Android.
1. Создайте новый проект Android Studio
2. Плагин Material Design Icon
Теперь нам нужно добавить плагин материального дизайна в студию Android.
Нажмите «Настройки» в главном меню Android Studio или нажмите COMMAND + на Mac.
Меню поиска плагинов в строке поиска.
Теперь нам нужно нажать «Обзор репозиториев» и выполнить поиск «Android Material Design Icon Generator».
Теперь нам нужно нажать на установку, и после успешной установки нам нужно перезапустить студию Android, чтобы плагины загрузились.
Вскоре после перезапуска студии android теперь нам нужно нажать File> New и прокрутить вниз, чтобы найти плагин Material design Icon.
После щелчка по пункту меню значка Material Design мы сможем увидеть всплывающее окно с генератором значков.
3. Поиск значков
Его очень легко искать по иконкам. Нам просто нужно начать вводить имя значка, и этот плагин покажет нам предложение, которое мы можем легко выбрать. мы также можем видеть значки, просто щелкнув раскрывающийся список, в результате чего мы сможем увидеть представление значка с правой стороны.
Искать значок будильника.
Итак, как мы видим, я начал искать значок будильника, и он показывает мне все значки, связанные с будильником.Теперь я могу выбрать значок будильника в соответствии с моими требованиями.
4. Цвет значка
Цвет значка — один из наиболее важных факторов для приложений, поскольку нам необходимо соблюдать определенную цветовую схему для каждого приложения. С помощью этого плагина материального дизайна менять цвета значков стало еще проще. Мы можем выбрать цвета в раскрывающемся списке или даже добавить свои собственные шестнадцатеричные коды цветов. В результате обоих вариантов у нас будут иконки с точным цветом.
5.Размер значка
Размер значка также является одним из наиболее важных факторов, поэтому эта опция также добавлена в этот плагин. Мы можем выбрать значки между 18dp, 24dp, 36dp или 48dp в соответствии с нашими потребностями.
6. Название значка
Из-за цвета, размера и имен значки автоматически получают имена, но мы также можем изменить имена, просто щелкнув в разделе имен. Конечно, это имя будет именем значка в папке чертежей.
6. Res Directory
Мы можем выбрать желаемое место для созданных иконок.По умолчанию значки сохраняются в папке drawables в папке res.
7. Тип изображения / вектора
У нас есть возможность создания изображения или вектора в виде файла значков в формате xml. Векторы легко поддерживать для различных разрешений.
Наконец, после выполнения всех шагов, мы можем просто щелкнуть ОК, и значки будут сохранены в папке чертежей.
Теперь мы можем динамически использовать этот значок в файлах xml и java. Давай попробуем с файлом xml.Добавьте следующий код в файл colors.xml .
xml version = "1.0" encoding = "utf-8"?> <ресурсы># d11617 # B31718 # FF4081
8. activity_main.xml
Для отображения значка нам нужно представление изображения, и только для имени значка мы добавили текстовое представление в XML-файле MainActivity.
xml version = "1.0" encoding = "utf-8"?>
Следовательно, у нас будет вывод с изображением значка в ImageView.
Таусиф Уль Рахман
http://www.glowingsoft.com
Таусиф является страстным энтузиастом технологий с огромным опытом в структурировании, разработке и развертывании программных приложений.Его основные области — Android, iOS и веб-приложения.
иконок — материализовать
Мы добавили 932 иконок Material Design, любезно предоставленных Google. Вы можете скачать их прямо из спецификаций Material Design.
Чтобы использовать эти значки, вы должны включить эту строку в часть
вашего HTML-кода
Чтобы использовать эти значки, используйте класс material-icons для элемента и укажите лигатуру в качестве текста содержание.
Чтобы управлять размером значка, измените свойство font-size: 30px
своего значка. При желании вы можете использовать предустановленные классы, как показано ниже.
3d_ротация 3d_ротация
ac_unit ac_unit
access_alarm access_alarm
access_alarms access_alarms
access_time access_time
доступность доступность
доступный доступный
account_balance account_balance
account_balance_wallet account_balance_wallet
account_box account_box
account_circle account_circle
АБР АБР
прибавить прибавить
add_a_photo add_a_photo
add_alarm add_alarm
add_alert add_alert
add_box add_box
add_circle add_circle
add_circle_outline add_circle_outline
add_location add_location
add_shopping_cart add_shopping_cart
add_to_photos add_to_photos
add_to_queue add_to_queue
отрегулировать отрегулировать
airlines_seat_flat airlines_seat_flat
airport_seat_flat_angled airlines_seat_flat_angled
airport_seat_individual_suite airlines_seat_individual_suite
airport_seat_legroom_extra Airlines_seat_legroom_extra
airport_seat_legroom_normal Airlines_seat_legroom_normal
airport_seat_legroom_reduced airlines_seat_legroom_reduced
airlines_seat_recline_extra Airlines_seat_recline_extra
airlines_seat_recline_normal airlines_seat_recline_normal
airplanemode_active airplanemode_active
airplanemode_inactive airplanemode_inactive
трансляция трансляция
airport_shuttle airport_shuttle
сигнализация сигнализация
alarm_add alarm_add
alarm_off alarm_off
тревога_он тревога_в
альбом альбом
все включено все включено
all_out all_out
андроид андроид
объявление объявление
приложений приложений
архив архив
arrow_back arrow_back
arrow_downward arrow_downward
arrow_drop_down arrow_drop_down
arrow_drop_down_circle arrow_drop_down_circle
arrow_drop_up arrow_drop_up
arrow_forward arrow_forward
arrow_upward arrow_upward
art_track art_track
соотношение сторон соотношение сторон
оценка оценка
назначение назначение
assignment_ind assignment_ind
конец_задания конец_записи
assignment_return assignment_return
assignment_returned assignment_returned
assignment_turned_in assignment_turned_in
помощник помощник
ассистент_фото ассистент_фото
attach_file attach_file
attach_money attach_money
приставка приставка
аудиотрек аудиотрек
автообновление автообновление
авітаймер авітаймер
backspace backspace
резервное копирование резервное копирование
battery_alert battery_alert
battery_charging_full battery_charging_full
полная батарея полная батарея
battery_std battery_std
battery_unknown battery_unknown
доступ к пляжу доступ к пляжу
здесь здесь
блок блок
bluetooth bluetooth
bluetooth_audio bluetooth_audio
bluetooth_connected bluetooth_connected
bluetooth_disabled bluetooth_disabled
bluetooth_searching bluetooth_searching
blur_circular blur_circular
blur_linear blur_linear
blur_off blur_off
blur_on blur_on
книга книга
закладка закладка
bookmark_border bookmark_border
border_all border_all
нижняя граница нижняя граница
border_clear border_clear
цвет границы цвет границы
border_horizontal border_horizontal
border_inner border_inner
border_left border_left
border_outer border_outer
border_right border_right
border_style border_style
border_top border_top
граница_вертикальная граница_вертикальная
branding_watermark branding_watermark
яркость_1 яркость_1
яркость_2 яркость_2
яркость_3 яркость_3
яркость_4 яркость_4
яркость_5 яркость_5
яркость_6 яркость_6
яркость_7 яркость_7
яркость_авто яркость_авто
яркость_высокая яркость_высокая
яркость_низкая яркость_низкая
яркость_среда яркость_среда
broken_image broken_image
щетка щетка
bubble_chart bubble_chart
bug_report bug_report
сборка сборка
burst_mode burst_mode
бизнес бизнес
бизнес_центр бизнес_центр
кэшируется кэшируется
торт торт
звонок звонок
call_end call_end
call_made call_made
call_merge call_merge
call_missed call_missed
call_missed_outgoing call_missed_outgoing
call_received call_received
call_split call_split
call_to_action call_to_action
камера камера
camera_alt camera_alt
camera_enhance camera_enhance
camera_front camera_front
camera_rear camera_rear
camera_roll camera_roll
отменить отменить
card_giftcard card_giftcard
card_membership card_membership
card_travel card_travel
казино казино
литье литье
cast_connected cast_connected
center_focus_strong center_focus_strong
center_focus_weak center_focus_weak
change_history change_history
чат чат
chat_bubble chat_bubble
chat_bubble_outline chat_bubble_outline
чек чек
check_box check_box
check_box_outline_blank check_box_outline_blank
check_circle check_circle
левый шеврон левый шеврон
chevron_right chevron_right
Уход за детьми Уход за детьми
дружелюбный к ребенку дружелюбный к ребенку
chrome_reader_mode chrome_reader_mode
класс класс
прозрачный прозрачный
clear_all clear_all
закрыть закрыть
closed_caption closed_caption
облако облако
cloud_circle cloud_circle
cloud_done cloud_done
cloud_download cloud_download
cloud_off cloud_off
cloud_queue cloud_queue
cloud_upload cloud_upload
код код
коллекций коллекций
коллекций_bookmark коллекций_закладка
color_lens color_lens
раскрасить раскрасить
комментарий комментарий
сравнить сравнить
compare_arrows compare_arrows
компьютер компьютер
номер_подтверждения номер_подтверждения
contact_mail contact_mail
contact_phone contact_phone
контактов контактов
content_copy content_copy
content_cut content_cut
content_paste content_paste
control_point control_point
control_point_duplicate control_point_duplicate
авторское право авторское право
создать создать
create_new_folder create_new_folder
кредитная карта кредитная карта
урожай урожай
урожай_16_9 урожай_16_9
урожай_3_2 урожай_3_2
урожай_5_4 урожай_5_4
урожай_7_5 урожай_7_5
Кроп_дин Кроп_дин
Crop_free Crop_free
Crop_landscape Crop_landscape
культура_оригинал культура_оригинал
Crop_portrait Crop_portrait
Crop_rotate Crop_rotate
Квадрат Квадрат
приборная панель приборная панель
data_usage data_usage
диапазон_даты диапазон_даты
удалить дымку удалить дымку
удалить удалить
delete_forever delete_forever
delete_sweep delete_sweep
описание описание
desktop_mac desktop_mac
desktop_windows desktop_windows
подробности подробности
Плата разработчика Плата разработчика
developer_mode developer_mode
концентратор_устройства концентратор_устройства
устройств устройств
устройств_других устройств_других
dialer_sip dialer_sip
панель набора номера панель набора номера
направлений направлений
direction_bike direction_bike
направления_ лодка направление_ лодка
направления_шина направлений_шина
направление_автомобиль направление_машина
направление_железная дорога направление_железная дорога
direction_run direction_run
direction_subway direction_subway
direction_transit direction_transit
direction_walk direction_walk
полный диск полный диск
днс днс
do_not_disturb do_not_disturb
do_not_disturb_alt do_not_disturb_alt
do_not_disturb_off do_not_disturb_off
do_not_disturb_on do_not_disturb_on
док док
домен домен
выполнено выполнено
готово_все готово_все
пончик большой пончик большой
пончик_маленький пончик_маленький
шашки шашки
ручка перетаскивания ручка перетаскивания
drive_eta drive_eta
видеорегистратор видеорегистратор
редактировать редактировать
edit_location edit_location
выбросить выбросить
электронная почта электронная почта
расширенное_шифрование расширенное_шифрование
эквалайзер эквалайзер
Ошибка Ошибка
error_outline error_outline
евро_символ евро_символ
ev_station ev_station
событие событие
event_available event_available
event_busy event_busy
event_note event_note
event_seat event_seat
exit_to_app exit_to_app
expand_less expand_less
expand_more expand_more
явное явное
изучить изучить
экспозиция экспозиция
Exposure_neg_1 Exposure_neg_1
Exposition_neg_2 Exposure_neg_2
Exposure_plus_1 Extension_plus_1
Exposure_plus_2 Extension_plus_2
ноль экспозиции ноль экспозиции
добавочный добавочный
лицевая лицевая
fast_forward fast_forward
fast_rewind fast_rewind
избранное избранное
любимая_ граница любимая_ граница
Featured_play_list Featured_play_list
избранное_видео избранное_видео
обратная связь обратная связь
fiber_dvr fiber_dvr
fiber_manual_record fiber_manual_record
fiber_new fiber_new
fiber_pin fiber_pin
fiber_smart_record fiber_smart_record
file_download file_download
file_upload file_upload
фильтр фильтр
фильтр_1 фильтр_1
фильтр_2 фильтр_2
фильтр_3 фильтр_3
фильтр_4 фильтр_4
фильтр_5 фильтр_5
фильтр_6 фильтр_6
фильтр_7 фильтр_7
filter_8 filter_8
фильтр_9 фильтр_9
filter_9_plus filter_9_plus
filter_b_and_w filter_b_and_w
filter_center_focus filter_center_focus
filter_drama filter_drama
filter_frames filter_frames
filter_hdr filter_hdr
filter_list filter_list
filter_none filter_none
filter_tilt_shift filter_tilt_shift
filter_vintage filter_vintage
find_in_page find_in_page
find_replace find_replace
отпечаток пальца отпечаток пальца
первая_страница первая_страница
фитнес_центр фитнес_центр
флаг флаг
под отбортовку под отбортовку
flash_auto flash_auto
flash_off flash_off
flash_on flash_on
рейс рейс
flight_land flight_land
рейс_взлет рейс_взлет
флип флип
flip_to_back flip_to_back
flip_to_front flip_to_front
папка папка
folder_open folder_open
folder_shared folder_shared
папка_специальная папка_специальная
font_download font_download
format_align_center format_align_center
format_align_justify format_align_justify
format_align_left format_align_left
format_align_right format_align_right
жирный_формат жирный_формат
format_clear format_clear
format_color_fill format_color_fill
format_color_reset format_color_reset
формат_цвет_текста формат_цвет_текст
format_indent_decrease format_indent_decrease
format_indent_increase format_indent_increase
format_italic format_italic
format_line_spacing format_line_spacing
format_list_bulleted format_list_bulleted
format_list_numbered format_list_numbered
format_paint format_paint
format_quote format_quote
format_shapes format_shapes
формат_размер формат_размер
format_strikethrough format_strikethrough
format_textdirection_l_to_r format_textdirection_l_to_r
format_textdirection_r_to_l format_textdirection_r_to_l
формат_подчеркнутый формат_подчеркнутый
форум форум
вперед вперед
вперед_10 вперед_10
вперед_30 вперед_30
вперед_5 вперед_5
бесплатный завтрак бесплатный завтрак
полноэкранный полноэкранный
полноэкранный_exit полноэкранный_exit
функций функций
g_translate g_translate
геймпад геймпад
игр игр
молоток молоток
жест жест
get_app get_app
gif gif
гольф_курс гольф_курс
gps_fixed gps_fixed
gps_not_fixed gps_not_fixed
gps_off gps_off
марка марка
градиент градиент
зерно зерно
graphic_eq graphic_eq
grid_off grid_off
сетка_на сетка_он
группа группа
group_add group_add
group_work group_work
hd hd
hdr_off hdr_off
hdr_он hdr_on
hdr_strong hdr_strong
hdr_weak hdr_weak
гарнитура гарнитура
headset_mic headset_mic
исцеление исцеление
слух слух
справка справка
help_outline help_outline
высокое_качество высокое_качество
изюминка изюминка
highlight_off highlight_off
история история
дом дом
гидромассажная ванна гидромассажная ванна
гостиница гостиница
песочные часы_ пустые песочные часы_ пустые
полные песочные часы полные песочные часы
http http
https https
изображение изображение
image_aspect_ratio image_aspect_ratio
import_contacts import_contacts
import_export import_export
important_devices important_devices
входящие входящие
indeterminate_check_box indeterminate_check_box
информация информация
info_outline info_outline
вход вход
insert_chart insert_chart
insert_comment insert_comment
insert_drive_file insert_drive_file
insert_emoticon insert_emoticon
insert_invitation insert_invitation
insert_link insert_link
insert_photo insert_photo
invert_colors invert_colors
invert_colors_off invert_colors_off
iso iso
клавиатура клавиатура
keyboard_arrow_down keyboard_arrow_down
keyboard_arrow_left keyboard_arrow_left
keyboard_arrow_right keyboard_arrow_right
keyboard_arrow_up keyboard_arrow_up
keyboard_backspace keyboard_backspace
keyboard_capslock keyboard_capslock
keyboard_hide keyboard_hide
keyboard_return keyboard_return
keyboard_tab keyboard_tab
keyboard_voice keyboard_voice
кухня кухня
этикетка этикетка
label_outline label_outline
пейзаж пейзаж
язык язык
ноутбук ноутбук
ноутбук_chromebook ноутбук_chromebook
ноутбук_mac ноутбук_mac
ноутбук_windows ноутбук_windows
last_page last_page
запуск запуск
слоев слоев
Layers_clear Layers_clear
добавить утечку добавить утечку
leak_remove leak_remove
линза линза
добавление библиотеки добавление библиотеки
библиотека_книги библиотека_книги
library_music library_music
lightbulb_outline lightbulb_outline
line_style line_style
line_weight line_weight
linear_scale linear_scale
ссылка ссылка
connected_camera connected_camera
список список
live_help live_help
live_tv live_tv
local_activity local_activity
local_airport local_airport
local_atm local_atm
local_bar local_bar
local_cafe local_cafe
local_car_wash local_car_wash
local_convenience_store local_convenience_store
local_dining local_dining
local_drink local_drink
local_florist local_florist
местная_газовая_станция местная_газовая_станция
local_grocery_store local_grocery_store
местная_больница местная_больница
local_hotel local_hotel
local_laundry_service local_laundry_service
местная_библиотека местная_библиотека
local_mall local_mall
local_movies local_movies
местное_предложение местное_предложение
local_parking local_parking
local_pharmacy local_pharmacy
local_phone local_phone
local_pizza local_pizza
local_play local_play
local_post_office local_post_office
local_printshop local_printshop
local_see local_see
local_shipping local_shipping
local_taxi local_taxi
location_city location_city
location_disabled location_disabled
location_off location_off
расположение_на расположение_на
location_searching location_searching
замок замок
lock_open lock_open
lock_outline lock_outline
выглядит выглядит
look_3 look_3
look_4 look_4
look_5 look_5
look_6 look_6
look_one look_one
look_two look_two
петля петля
луп луп
низкий_приоритет низкий_приоритет
лояльность лояльность
почта почта
mail_outline mail_outline
карта карта
markunread markunread
markunread_mailbox markunread_mailbox
память память
меню меню
merge_type merge_type
сообщение сообщение
микрофон микрофон
mic_none mic_none
mic_off mic_off
мм мм
mode_comment mode_comment
mode_edit mode_edit
монетизация_он монетизация_он
money_off money_off
монохромные_фотографии монохромные_фотографии
настроение настроение
mood_bad mood_bad
подробнее подробнее
more_horiz more_horiz
more_vert more_vert
мотоцикл мотоцикл
мышь мышь
move_to_inbox move_to_inbox
фильм фильм
movie_creation movie_creation
movie_filter movie_filter
multiline_chart multiline_chart
music_note music_note
music_video music_video
my_location my_location
природа природа
природа_ люди природа_ люди
navigate_before navigate_before
navigate_next navigate_next
навигация навигация
near_me near_me
network_cell network_cell
network_check network_check
network_locked network_locked
сеть_wifi сеть_wifi
new_releases new_releases
следующая неделя следующая неделя
NFC NFC
no_encryption no_encryption
no_sim no_sim
не заинтересован не заинтересован
примечание примечание
note_add note_add
уведомлений уведомлений
notifications_active notifications_active
notifications_none notifications_none
notifications_off notifications_off
notifications_paused notifications_paused
offline_pin offline_pin
ondemand_video ondemand_video
непрозрачность непрозрачность
open_in_browser open_in_browser
open_in_new open_in_new
open_with open_with
страниц страниц
просмотров просмотров
палитра палитра
pan_tool pan_tool
панорама панорама
Panorama_fish_eye Panorama_fish_eye
панорама_горизонтальная панорама_горизонтальная
панорама_вертикальная панорама_вертикальная
панорама_широкоугольный панорама_широкоугольный
party_mode party_mode
пауза пауза
pause_circle_filled pause_circle_filled
pause_circle_outline pause_circle_outline
платеж платеж
человек человек
чел ._контроль чел_контракт
perm_camera_mic perm_camera_mic
perm_contact_calendar perm_contact_calendar
perm_data_setting perm_data_setting
perm_device_information perm_device_information
perm_identity perm_identity
перм_медиа перм_медиа
perm_phone_msg perm_phone_msg
perm_scan_wifi perm_scan_wifi
человек человек
человек_добавить _персонал
person_outline person_outline
человек_пин человек_пин
круг_контакта лица круг_контакта лица
личное_видео личное_видео
домашние животные домашние животные
телефон телефон
phone_android phone_android
phone_bluetooth_speaker phone_bluetooth_speaker
phone_forwarded phone_forwarded
phone_in_talk phone_in_talk
phone_iphone phone_iphone
phone_locked phone_locked
phone_missed phone_missed
phone_paused phone_paused
телефонная линия телефонная линия
стирание телефонной ссылки стирание телефонной ссылки
блокировка телефонной связи блокировка телефонной связи
phonelink_off phonelink_off
кольцо_ телефонной связи кольцо_ телефонной связи
phonelink_setup phonelink_setup
photo photo
photo_album photo_album
photo_camera photo_camera
photo_filter photo_filter
photo_library photo_library
photo_size_select_actual photo_size_select_actual
photo_size_select_large photo_size_select_large
photo_size_select_small photo_size_select_small
picture_as_pdf picture_as_pdf
picture_in_picture picture_in_picture
picture_in_picture_alt picture_in_picture_alt
pie_chart pie_chart
pie_chart_outlined pie_chart_outlined
pin_drop pin_drop
place place
play_arrow play_arrow
play_circle_filled play_circle_filled
play_circle_outline play_circle_outline
play_for_work play_for_work
playlist_add playlist_add
playlist_add_check playlist_add_check
playlist_play playlist_play
plus_one plus_one
poll poll
polymer polymer
pool pool
portable_wifi_off portable_wifi_off
portrait portrait
power power
power_input power_input
power_settings_new power_settings_new
pregnant_woman pregnant_woman
present_to_all present_to_all
print print
priority_high priority_high
public public
publish publish
query_builder query_builder
question_answer question_answer
queue queue
queue_music queue_music
queue_play_next queue_play_next
radio radio
radio_button_checked radio_button_checked
radio_button_unchecked radio_button_unchecked
rate_review rate_review
receipt receipt
recent_actors recent_actors
record_voice_over record_voice_over
redeem redeem
redo redo
refresh refresh
remove remove
remove_circle remove_circle
remove_circle_outline remove_circle_outline
remove_from_queue remove_from_queue
remove_red_eye remove_red_eye
remove_shopping_cart remove_shopping_cart
reorder reorder
repeat repeat
repeat_one repeat_one
replay replay
replay_10 replay_10
replay_30 replay_30
replay_5 replay_5
reply reply
reply_all reply_all
report report
report_problem report_problem
restaurant restaurant
restaurant_menu restaurant_menu
restore restore
restore_page restore_page
ring_volume ring_volume
room room
room_service room_service
rotate_90_degrees_ccw rotate_90_degrees_ccw
rotate_left rotate_left
rotate_right rotate_right
rounded_corner rounded_corner
router router
rowing rowing
rss_feed rss_feed
rv_hookup rv_hookup
satellite satellite
save save
scanner scanner
schedule schedule
school school
screen_lock_landscape screen_lock_landscape
screen_lock_portrait screen_lock_portrait
screen_lock_rotation screen_lock_rotation
screen_rotation screen_rotation
screen_share screen_share
sd_card sd_card
sd_storage sd_storage
search search
security security
select_all select_all
send send
sentiment_dissatisfied sentiment_dissatisfied
sentiment_neutral sentiment_neutral
sentiment_satisfied sentiment_satisfied
sentiment_very_dissatisfied sentiment_very_dissatisfied
sentiment_very_satisfied sentiment_very_satisfied
settings settings
settings_applications settings_applications
settings_backup_restore settings_backup_restore
settings_bluetooth settings_bluetooth
settings_brightness settings_brightness
settings_cell settings_cell
settings_ethernet settings_ethernet
settings_input_antenna settings_input_antenna
settings_input_component settings_input_component
settings_input_composite settings_input_composite
settings_input_hdmi settings_input_hdmi
settings_input_svideo settings_input_svideo
settings_overscan settings_overscan
settings_phone settings_phone
settings_power settings_power
settings_remote settings_remote
settings_system_daydream settings_system_daydream
settings_voice settings_voice
share share
shop shop
shop_two shop_two
shopping_basket shopping_basket
shopping_cart shopping_cart
short_text short_text
show_chart show_chart
shuffle shuffle
signal_cellular_4_bar signal_cellular_4_bar
signal_cellular_connected_no_internet_4_bar signal_cellular_connected_no_internet_4_bar
signal_cellular_no_sim signal_cellular_no_sim
signal_cellular_null signal_cellular_null
signal_cellular_off signal_cellular_off
signal_wifi_4_bar signal_wifi_4_bar
signal_wifi_4_bar_lock signal_wifi_4_bar_lock
signal_wifi_off signal_wifi_off
sim_card sim_card
sim_card_alert sim_card_alert
skip_next skip_next
skip_previous skip_previous
slideshow slideshow
slow_motion_video slow_motion_video
smartphone smartphone
smoke_free smoke_free
smoking_rooms smoking_rooms
sms sms
sms_failed sms_failed
snooze snooze
sort sort
sort_by_alpha sort_by_alpha
spa spa
space_bar space_bar
speaker speaker
speaker_group speaker_group
speaker_notes speaker_notes
speaker_notes_off speaker_notes_off
speaker_phone speaker_phone
spellcheck spellcheck
star star
star_border star_border
star_half star_half
stars stars
stay_current_landscape stay_current_landscape
stay_current_portrait stay_current_portrait
stay_primary_landscape stay_primary_landscape
stay_primary_portrait stay_primary_portrait
stop stop
stop_screen_share stop_screen_share
storage storage
store store
store_mall_directory store_mall_directory
straighten straighten
streetview streetview
strikethrough_s strikethrough_s
style style
subdirectory_arrow_left subdirectory_arrow_left
subdirectory_arrow_right subdirectory_arrow_right
subject subject
subscriptions subscriptions
subtitles subtitles
subway subway
supervisor_account supervisor_account
surround_sound surround_sound
swap_calls swap_calls
swap_horiz swap_horiz
swap_vert swap_vert
swap_vertical_circle swap_vertical_circle
switch_camera switch_camera
switch_video switch_video
sync sync
sync_disabled sync_disabled
sync_problem sync_problem
system_update system_update
system_update_alt system_update_alt
tab tab
tab_unselected tab_unselected
tablet tablet
tablet_android tablet_android
tablet_mac tablet_mac
tag_faces tag_faces
tap_and_play tap_and_play
terrain terrain
text_fields text_fields
text_format text_format
textsms textsms
texture texture
theaters theaters
thumb_down thumb_down
thumb_up thumb_up
thumbs_up_down thumbs_up_down
time_to_leave time_to_leave
timelapse timelapse
timeline timeline
timer timer
timer_10 timer_10
timer_3 timer_3
timer_off timer_off
title title
toc toc
today today
toll toll
tonality tonality
touch_app touch_app
toys toys
track_changes track_changes
traffic traffic
train train
tram tram
transfer_within_a_station transfer_within_a_station
transform transform
translate translate
trending_down trending_down
trending_flat trending_flat
trending_up trending_up
tune tune
turned_in turned_in
turned_in_not turned_in_not
tv tv
unarchive unarchive
undo undo
unfold_less unfold_less
unfold_more unfold_more
update update
usb usb
verified_user verified_user
vertical_align_bottom vertical_align_bottom
vertical_align_center vertical_align_center
vertical_align_top vertical_align_top
vibration vibration
video_call video_call
video_label video_label
video_library video_library
videocam videocam
videocam_off videocam_off
videogame_asset videogame_asset
view_agenda view_agenda
view_array view_array
view_carousel view_carousel
view_column view_column
view_comfy view_comfy
view_compact view_compact
view_day view_day
view_headline view_headline
view_list view_list
view_module view_module
view_quilt view_quilt
view_stream view_stream
view_week view_week
vignette vignette
visibility visibility
visibility_off visibility_off
voice_chat voice_chat
voicemail voicemail
volume_down volume_down
volume_mute volume_mute
volume_off volume_off
volume_up volume_up
vpn_key vpn_key
vpn_lock vpn_lock
wallpaper wallpaper
warning warning
watch watch
watch_later watch_later
wb_auto wb_auto
wb_cloudy wb_cloudy
wb_incandescent wb_incandescent
wb_iridescent wb_iridescent
wb_sunny wb_sunny
wc wc
web web
web_asset web_asset
weekend weekend
whatshot whatshot
widgets widgets
wifi wifi
wifi_lock wifi_lock
wifi_tethering wifi_tethering
work work
wrap_text wrap_text
youtube_searched_for youtube_searched_for
zoom_in zoom_in
zoom_out zoom_out
zoom_out_map zoom_out_map
Awesome Material Design | Curated list of awesome lists
A curated list of Google’s material design based libraries, resources and awesome things.
- Surface — легкий фреймворк, основанный только на CSS, основанный на Material Design.
- material-ui — CSS Framework и набор компонентов React, реализующих материальный дизайн Google.
- bootstrap-material-design — Тема материального дизайна для Bootstrap 3.
- materialize — Материализация, CSS-фреймворк, основанный на материальном дизайне.
- materialBootstrap — тема Twitter Bootstrap для материального дизайна Google.
- материал-площадка — Детская площадка из полимерных материалов.
- material-framework — простой в использовании каркас на основе материального дизайна.
- mui — облегченная структура CSS, соответствующая рекомендациям по материальному дизайну.
- material-foundation — версия Foundation для сайтов с материальным дизайном.
- Tronic247 Material — фреймворк для материального дизайна, основанный на jQuery и CSS
.
- AngularJS — Материальный дизайн для AngularJS.
- Angular — Материальный дизайн для Angular.
- DevExtreme — 65+ отзывчивых и полнофункциональных компонентов пользовательского интерфейса с настраиваемыми темами, совместимыми с Material Design.Доступно для Angular, React, Vue и jQuery.
- ember-paper — подход Ember к материальному дизайну.
- material-design-lite — Компоненты Material Design Lite в HTML / CSS / JS.
- react-material — компоненты материального дизайна, написанные с помощью React.js и React Style.
- MaterialPress — MaterialPress — это тема WordPress, на которую сильно повлияла философия дизайна материалов Google.
- materialwp — тема WordPress для материального дизайна.
- MaterialSkin — тематика .NET WinForms, C # или VB.Net в соответствии с принципами дизайна материалов Google.
- material_design_zh — Совместная разработка материалов на китайский язык
- material-color-scheme — синтаксическая тема Sublime Text, основанная на цветовой палитре Material Design.
- framaterial — фреймворк для создания проектов материального дизайна.
- Шаблоны материального дизайна — различные темы и шаблоны, вдохновленные материальным дизайном на ThemeForest.
- MaterialUp — Получите ежедневную дозу вдохновения в дизайне материалов!
- Палитра материалов — выберите свои любимые цвета и создайте палитру материального дизайна.
- Бумажные полимерные элементы. Бумажные элементы — это набор визуальных элементов, реализующих материальный дизайн Google.
- ScaffoldHub.io — Создавайте полные приложения Angular Material с помощью инструмента онлайн-моделирования!
Другие удивительно крутые списки можно найти в списке потрясающе-крутых.
Содействие
Мы всегда рады Вашему вкладу! Пожалуйста, сначала прочтите правила внесения вкладов.
Лицензирование
— Использование значков Material Design в коммерческом программном обеспечении
Технически, чтобы получить лицензию на лицензию Apache License 2.0, необходимо убедиться, что пользователи программного обеспечения могут читать полные файлы лицензии и уведомлений (т. Е. Файлы лицензии и уведомлений должны быть включены в развертывание и быть доступными, лицензия может быть в краткой форме ). В приложении для Android это может быть так же просто, как перетащить их в папку assets
, к которой можно получить доступ, разархивировав apk или используя относительно новый плагин лицензий OSS [1].Для Интернета достаточно сделать их доступными в общедоступной папке лицензий.
Обратите внимание, что ваше программное обеспечение не обязательно должно быть упаковано или иметь установщик, чтобы его можно было классифицировать как «производная работа», любое программное обеспечение, которое использует библиотеку / код, лицензированные по лицензии Apache License 2.0, является производным от этой библиотеки / кода.
«Производные работы» означает любую работу, как в Исходном, так и в Объекте.
форма, которая основана на Работе (или получена из нее) и для которой
редакционные исправления, аннотации, уточнения или другие модификации
представляют собой в целом оригинальное авторское произведение.Для
для целей данной Лицензии, Производные работы не должны включать работы
которые остаются отделенными от или просто связываются (или связываются по имени) с
интерфейсы, Работы и Производные работы на их основе.
Пункт «Для целей данной Лицензии Производные работы не должны включать в себя работы, которые остаются отделенными или просто связываются (или связываются по имени) с интерфейсами Работы и Производных работ». [2] Казалось бы, интеграция с библиотекой SaaS подойдет для этого случая или, в вашем случае, связывание с внешними файлами значков материалов.Существование плагина лицензий OSS от Google предполагает, что включение библиотеки при использовании только ее интерфейсов по-прежнему относится к категории «Производные работы».
Если вы храните файлы значков на своем сервере / в своей инфраструктуре, ваше веб-приложение эффективно перераспределяет части работы.
[1] https://developers.google.com/android/guides/opensource
[2] http://www.