Name | Date | Size | #Lines | LOC | ||
---|---|---|---|---|---|---|
.. | 03-May-2022 | - | ||||
build/ | H | 03-May-2022 | - | |||
dist/ | H | 07-May-2019 | - | 4,079 | 4,042 | |
src/ | H | 07-May-2019 | - | 1,364 | 1,349 | |
.gitignore | H A D | 07-May-2019 | 33 | 3 | 3 | |
LICENSE | H A D | 07-May-2019 | 11.1 KiB | 203 | 169 | |
README.md | H A D | 07-May-2019 | 3.1 KiB | 109 | 57 | |
bower.json | H A D | 07-May-2019 | 595 | 24 | 23 | |
package.json | H A D | 07-May-2019 | 1,018 | 39 | 38 |
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