• Home
  • History
  • Annotate
Name Date Size #Lines LOC

..03-May-2022-

build/H03-May-2022-

dist/H07-May-2019-4,0794,042

src/H07-May-2019-1,3641,349

.gitignoreH A D07-May-201933 33

LICENSEH A D07-May-201911.1 KiB203169

README.mdH A D07-May-20193.1 KiB10957

bower.jsonH A D07-May-2019595 2423

package.jsonH A D07-May-20191,018 3938

README.md

1
2![banner-01](https://user-images.githubusercontent.com/1287098/47606030-f76c3680-da16-11e8-8508-92b26b68f3f8.png)
3
4
5[Project's Demo Page](https://jossef.github.io/material-design-icons-iconfont)
6
7
8## MDI**DX** - Same Material Design icons, Better DX
9
10
11MDI**DX** (this repository) is a ~*fork* (+ fixes) of Google's [Material Design icons](https://github.com/google/material-design-icons) repository.
12Sadly, Google allocates **low maintenance and low support** for issues reported by software developers having trouble using the Material Design icons library.
13
14
15MDI**DX** helps modern **web developers** to use and include the (awesome) Material Design icons library in their project.
16
17
18
19### Installation
20
21
22using bower
23```
24bower install material-design-icons-iconfont --save
25```
26
27using npm
28```
29npm install material-design-icons-iconfont --save
30```
31
32
33
34### Usage - Check out the [Demo Page](https://jossef.github.io/material-design-icons-iconfont)
35
36
37- Using `bower`
38
39    bower IMO is the simplest way to use this project
40    Add this inside your `<head>`
41
42      <link href="bower_components/material-design-icons-iconfont/dist/material-design-icons.css" rel="stylesheet">
43
44    Later on, reference your desired icon `<i class="material-icons">` + icon-id + `</i>`. For instance:
45
46      <i class="material-icons">contact_support</i>
47
48    Visit the [Demo Page](https://jossef.github.io/material-design-icons-iconfont) for the full icons list
49
50- Using `scss`
51
52  Import fonts and variables in your project
53
54  ```scss
55  $material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
56
57  @import '~material-design-icons-iconfont/src/material-design-icons';
58  ```
59
60  **Customize your own classes**
61
62  access material variable with Sass mixins:
63
64  ```scss
65  .my-face {
66    @include material-icon('face');
67  }
68  # or
69  .my-face:before {
70    content: material-icons-content('face');
71  }
72  ```
73
74
75
76### What's the difference? Why forking?
77
78
79- **Performance** -
80    When you checkout Google's [original repository](https://github.com/google/material-design-icons)  ( via git, npm and bower) you experience an unwanted delay. This **checkout delay** is caused by **thousands** of separate source graphic `svg,png,...` files.
81
82    Needless to say that these file are **irrelevant** for the average developer's purposes and **cause build congestion** (especially when using in CI systems)
83
84    In this fork all irrelevant files have been **removed** while keeping only the required files.
85
86
87- **SCSS Support** - Modern developers need support for `scss`. You can customize the referenced font's files filename and path
88
89
90- **Maintenance** - The original repository's release has **missing icons** that should be included according to [https://material.io/tools/icons](https://material.io/tools/icons)
91
92
93### [Demo Page](https://jossef.github.io/material-design-icons-iconfont)
94
95![image](https://user-images.githubusercontent.com/1287098/47608007-44a8d200-da30-11e8-8750-694fb2fb26e4.png)
96
97### How to contribute to this project
98
99**Configure environment**
100
101Install nodejs on your environemt (> 7.6 for async await)
102
103**running build**
104```
105npm install
106npm run build
107```
108
109