MDIDX (this repository) is a ~fork (+ fixes) of Google's Material Design icons repository. Sadly, Google allocates low maintenance and low support for issues reported by software developers having trouble using the Material Design icons library.
MDIDX helps modern web developers to use and include the (awesome) Material Design icons library in their project.
using bower
bower install material-design-icons-iconfont --save
using npm
npm install material-design-icons-iconfont --save
Usage - Check out the Demo Page
-
Using
bowerbower IMO is the simplest way to use this project
Add this inside your<head><link href="bower_components/material-design-icons-iconfont/dist/material-design-icons.css" rel="stylesheet">Later on, reference your desired icon
<i class="material-icons">+ icon-id +</i>. For instance:<i class="material-icons">contact_support</i>Visit the Demo Page for the full icons list
-
Using
scssImport fonts and variables in your project
$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/'; @import '~material-design-icons-iconfont/src/material-design-icons';
Customize your own classes
access material variable with Sass mixins:
.my-face { @include material-icon('face'); } # or .my-face:before { content: material-icons-content('face'); }
-
Performance - When you checkout Google's original repository ( via git, npm and bower) you experience an unwanted delay. This checkout delay is caused by thousands of separate source graphic
svg,png,...files.Needless to say that these file are irrelevant for the average developer's purposes and cause build congestion (especially when using in CI systems)
In this fork all irrelevant files have been removed while keeping only the required files.
-
SCSS Support - Modern developers need support for
scss. You can customize the referenced font's files filename and path -
Maintenance - The original repository's release has missing icons that should be included according to https://material.io/tools/icons
Configure environment
cd build
pip install virtualenv
# if you have multiple versions of python installed
virtualenv -p python3 .venv
# else..
virtualenv .venv
source .venv/bin/activate #(Mac, Linux) or source .venv/Scripts/activate (Win)
pip install -r requirements.txt
running build
- The build folder whould be properly installed.
- Go to build folder and install dependencies:
cd build
source .venv/bin/activate #source .venv/Scripts/activate on Windows
python build.py
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent