material-icons - npm Package Compare versions

Comparing version 0.6.4 to 0.7.0

package.json

 {
   "name": "material-icons",
-  "version": "0.6.4",
+  "version": "0.7.0",
   "description": "Material design icon font and CSS framework for self hosting the icons.",
+  "files": [
+    "css/*.{css,scss}",
+    "iconfont/*.{css,scss,woff,woff2}"
+  ],
   "browser": "iconfont/material-icons.css",
   "scripts": {
-    "build": "npm run build:codepoints && npm run build:iconfont && npm run build:css && npm run build:css:min",
+    "build": "npm run build:codepoints && npm run build:css && npm run build:css:min",
     "build:codepoints": "node scripts/codepoints.js",
-    "build:iconfont": "node-sass --output-style=expanded iconfont/material-icons.scss iconfont/material-icons.css",
-    "build:css": "node-sass --output-style=expanded css/material-icons.scss css/material-icons.css",
-    "build:css:min": "node-sass --output-style=compressed css/material-icons.scss css/material-icons.min.css"
+    "build:css": "sass --no-source-map --no-error-css css iconfont",
+    "build:css:min": "sass --style compressed --no-source-map --no-error-css css/material-icons.scss:css/material-icons.min.css"
   },
   "devDependencies": {
-    "node-sass": "^5.0.0",
-    "opentype.js": "^1.3.3"
+    "opentype.js": "^1.3.3",
+    "sass": "^1.34.0"
   },
@@ -20,3 +23,3 @@ "license": "Apache-2.0",
     "type": "git",
-    "url": "https://github.com/marella/material-icons.git"
+    "url": "git+https://github.com/marella/material-icons.git"
   },
@@ -23,0 +26,0 @@ "bugs": {

README.md

@@ -5,4 +5,2 @@ # Material Icons
 
-> This package contains only the icon font and required CSS. So it is considerably smaller than the official `material-design-icons` package and easy to install.
-
 - [Installation](#installation)
@@ -12,13 +10,8 @@ - [Usage](#usage)
 
-## Upcoming Changes
-
-- [ ] Remove `eot` font files as they are only required for IE6-8
-- [ ] Remove `ttf` and `otf` font files as `woff2` and `woff` font files should be enough for modern browsers
-
 ## Installation
 
-Download the [latest release] or install using npm:
+Install the [latest version][releases] using:
 
 ```sh
-npm install material-icons
+npm install material-icons@latest
 ```
@@ -28,8 +21,6 @@
 
-Font files are present in the [`iconfont`][iconfont] directory and can be imported using CSS.
+Fonts are located in the [`iconfont`][iconfont] directory and can be imported using CSS:
 
-Import CSS:
-
 ```html
-<link rel="stylesheet" href="/path/to/material-icons/iconfont/material-icons.css">
+<link href="/path/to/material-icons/iconfont/material-icons.css" rel="stylesheet">
 ```
@@ -43,3 +34,3 @@
 
-To display outlined, round, sharp and two tone icons, use:
+To display outlined, round, sharp and two-tone icons, use:
 
@@ -53,3 +44,42 @@ ```html
 
+For more advanced usage, see:
+
 <details>
+<summary><strong>Import using build tools</strong></summary>
+
+If you are using webpack, Create React App or Vue CLI, import CSS in `src/index.js` or `src/main.js`:
+
+```js
+import 'material-icons/iconfont/material-icons.css';
+```
+
+If you are using Angular CLI, import CSS in `src/styles.css`:
+
+```css
+@import 'material-icons/iconfont/material-icons.css';
+```
+
+</details>
+
+<details>
+<summary><strong>Display using Angular <code>mat-icon</code></strong></summary>
+
+To display an icon, use:
+
+```html
+<mat-icon>pie_chart</mat-icon>
+```
+
+To display outlined, round, sharp and two-tone icons, use:
+
+```html
+<mat-icon fontSet="material-icons-outlined">pie_chart</mat-icon>
+<mat-icon fontSet="material-icons-round">pie_chart</mat-icon>
+<mat-icon fontSet="material-icons-sharp">pie_chart</mat-icon>
+<mat-icon fontSet="material-icons-two-tone">pie_chart</mat-icon>
+```
+
+</details>
+
+<details>
 <summary><strong>Customize using Sass</strong></summary>
@@ -63,16 +93,14 @@
 
-If you are using webpack sass-loader, use:
+Available Sass variables:
 
 ```scss
-$material-icons-font-path: '~material-icons/iconfont/';
-
-@import '~material-icons/iconfont/material-icons.scss';
+$material-icons-font-path: './' !default;
+$material-icons-font-size: 24px !default;
+$material-icons-font-display: block !default;
 ```
 
-Available Sass variables:
+If you are getting errors with webpack or Vue CLI, add this line before importing above Sass file:
 
 ```scss
-$material-icons-font-path: '' !default;
-$material-icons-font-size: 24px !default;
-$material-icons-font-display: block !default;
+$material-icons-font-path: '~material-icons/iconfont/';
 ```
@@ -84,10 +112,8 @@
 
-Alternatively, you may use CSS classes instead of ligatures to display an icon.
+> **Note:** This method is not recommended as it requires an additional large CSS file.
 
-> **Note:** This method is not recommended as it requires a large CSS file to be imported in addition to above files.
+Alternatively, you may use CSS classes to display icons by importing additional CSS:
 
-Import CSS:
-
 ```html
-<link rel="stylesheet" href="/path/to/material-icons/css/material-icons.min.css">
+<link href="/path/to/material-icons/css/material-icons.css" rel="stylesheet">
 ```
@@ -101,3 +127,3 @@
 
-To display outlined, round, sharp and two tone icons, use:
+To display outlined, round, sharp and two-tone icons, use:
 
@@ -111,3 +137,42 @@ ```html
 
+For more advanced usage, see:
+
 <details>
+<summary><strong>Import using build tools</strong></summary>
+
+If you are using webpack, Create React App or Vue CLI, import CSS in `src/index.js` or `src/main.js`:
+
+```js
+import 'material-icons/css/material-icons.css';
+```
+
+If you are using Angular CLI, import CSS in `src/styles.css`:
+
+```css
+@import 'material-icons/css/material-icons.css';
+```
+
+</details>
+
+<details>
+<summary><strong>Display using Angular <code>mat-icon</code></strong></summary>
+
+To display an icon, use:
+
+```html
+<mat-icon fontIcon="mi-pie-chart"></mat-icon>
+```
+
+To display outlined, round, sharp and two-tone icons, use:
+
+```html
+<mat-icon fontSet="material-icons-outlined" fontIcon="mi-pie-chart"></mat-icon>
+<mat-icon fontSet="material-icons-round" fontIcon="mi-pie-chart"></mat-icon>
+<mat-icon fontSet="material-icons-sharp" fontIcon="mi-pie-chart"></mat-icon>
+<mat-icon fontSet="material-icons-two-tone" fontIcon="mi-pie-chart"></mat-icon>
+```
+
+</details>
+
+<details>
 <summary><strong>Customize using Sass</strong></summary>
@@ -121,8 +186,2 @@
 
-If you are using webpack sass-loader, use:
-
-```scss
-@import '~material-icons/css/material-icons.scss';
-```
-
 Available Sass variables:
@@ -133,3 +192,3 @@
 $material-icons-css-search: '_' !default;
-$material-icons-css-replace: '-' !default; /* To replace '_' with '-' in CSS class names */
+$material-icons-css-replace: '-' !default; // Replaces '_' with '-' in CSS classes
 ```
@@ -143,4 +202,12 @@
 
-[latest release]: https://github.com/marella/material-icons/releases
-[iconfont]: https://github.com/marella/material-icons/tree/master/iconfont
+## License
+
+Material design icons are created by [Google](https://github.com/google/material-design-icons#license).
+
+> We have made these icons available for you to incorporate into your products under the [Apache License Version 2.0][license]. Feel free to remix and re-share these icons and documentation in your products.
+We'd love attribution in your app's *about* screen, but it's not required. The only thing we ask is that you not re-sell these icons.
+
+[releases]: https://github.com/marella/material-icons/releases
+[iconfont]: https://github.com/marella/material-icons/tree/main/iconfont
+[license]: https://github.com/marella/material-icons/blob/main/LICENSE
 [demo]: https://marella.github.io/material-icons/demo/

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 10 instances in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Native code

Supply chain risk

Contains native code (e.g., compiled binaries or shared libraries). Including native code can obscure malicious behavior.

Found 13 instances in 1 package

Filesystem access

Supply chain risk

Accesses the file system, and could potentially read sensitive data.

Found 1 instance in 1 package

Improved metrics

Number of lines in readme file

202

increased by49.63%

Number of low supply chain risk alerts

0

decreased by-100%

Number of medium supply chain risk alerts

10

decreased by-23.08%

Worsened metrics

Total package byte prevSize

1775108

decreased by-66.85%

Number of package files

21

decreased by-46.15%

Lines of code

6166

decreased by-24.43%

No dependency changes