material-icons
Advanced tools
material-icons - npm Package Compare versions
Comparing version 0.2.1 to 0.2.2
| { | ||
| "name": "material-icons", | ||
| "version": "0.2.1", | ||
| "version": "0.2.2", | ||
| "description": "Material design icon font and CSS framework for self hosting the icons.", | ||
@@ -13,3 +13,3 @@ "scripts": { | ||
| "devDependencies": { | ||
| "node-sass": "^4.7.2" | ||
| "node-sass": "^4.9.0" | ||
| }, | ||
@@ -16,0 +16,0 @@ "license": "Apache-2.0", |
@@ -5,3 +5,3 @@ # Material Icons | ||
| > **Note:** This package contains only the icon font and required CSS. So it is considerably small compared to the official [material-design-icons] package and easy to install. | ||
| > **Note:** This package contains only the icon font and required CSS. So it is considerably small compared to the official `material-design-icons` package and easy to install. | ||
@@ -18,5 +18,5 @@ ## Installation | ||
| Font files are present in the `iconfont` directory and can be imported using CSS. | ||
| Font files are present in the [`iconfont`][iconfont] directory and can be imported using CSS. | ||
| Import the required CSS: | ||
| Import CSS: | ||
@@ -27,14 +27,20 @@ ```html | ||
| or import the SCSS: | ||
| To display an icon, use: | ||
| ```html | ||
| <span class="material-icons">face</span> | ||
| ``` | ||
| To customize the build, import Sass instead of CSS: | ||
| ```scss | ||
| $material-icons-font-path: '~material-icons/iconfont/'; | ||
| @import 'material-icons/iconfont/material-icons.scss'; | ||
| ``` | ||
| To display an icon use: | ||
| If you are using webpack sass-loader, use: | ||
| ```html | ||
| <span class="material-icons">face</span> | ||
| ```scss | ||
| $material-icons-font-path: '~material-icons/iconfont/'; | ||
| @import '~material-icons/iconfont/material-icons.scss'; | ||
| ``` | ||
@@ -62,7 +68,7 @@ | ||
| Alternatively you can use CSS classes to display an icon. | ||
| Alternatively, you may use CSS classes to display an icon. | ||
| > **Note:** This method is not recommended as it requires a large CSS file to be imported in addition to above files. | ||
| Import the required CSS: | ||
| Import CSS: | ||
@@ -73,14 +79,18 @@ ```html | ||
| or import the SCSS: | ||
| To display an icon, use: | ||
| ```html | ||
| <span class="mi mi-face"></span> | ||
| ``` | ||
| To customize the build, import Sass instead of CSS: | ||
| ```scss | ||
| $material-icons-css-prefix: 'mi'; | ||
| @import 'material-icons/css/material-icons.scss'; | ||
| ``` | ||
| To display an icon use: | ||
| If you are using webpack sass-loader, use: | ||
| ```html | ||
| <span class="mi mi-face"></span> | ||
| ```scss | ||
| @import '~material-icons/css/material-icons.scss'; | ||
| ``` | ||
@@ -106,6 +116,5 @@ | ||
| See [material design icons]. | ||
| See <a href="https://material.io/icons/" target="_blank" rel="nofollow">material design icons</a>. | ||
| [latest release]: https://github.com/marella/material-icons/releases | ||
| [material design icons]: https://material.io/icons/ | ||
| [material-design-icons]: https://github.com/google/material-design-icons | ||
| [iconfont]: https://github.com/marella/material-icons/tree/master/iconfont |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by0.03%
848117
- Number of lines in readme file
- increased by8.49%
115
- Number of medium supply chain risk alerts
- decreased by-50%
1