@mdi/angular-material - npm Package Compare versions

Comparing version 5.3.45 to 5.4.55

package.json

 {
   "name": "@mdi/angular-material",
-  "version": "5.3.45",
+  "version": "5.4.55",
   "description": "Distribution and Build for Angular Material MDI",
@@ -26,5 +26,5 @@ "scripts": {
   "devDependencies": {
-    "@mdi/svg": "^5.3.45",
+    "@mdi/svg": "^5.4.55",
     "@mdi/util": "^0.3.2"
   }
 }

README.md

@@ -30,23 +30,7 @@ > *Note:* Please use the main [MaterialDesign](https://github.com/Templarian/MaterialDesign/issues) repo to report issues. This repo is for distribution of the Angular Material files only.
 
-Or if you're using Angular CLI:
+Or if you're using the Angular CLI, make sure to include `mdi.svg` in your `assets`
+folder under the [Angular workspace configuration file](https://angular.io/guide/workspace-config)
+in the `assets` array, located in the build configuration for your project:
 
-* For Angular CLI version 1.x, make sure to include `mdi.svg` in your `assets` folder under `.angular-cli.json` in the `assets` array:
-
-   ```json Angular CLI file
-   {
-      "apps": [
-        {
-          "assets": [
-            { "glob": "**/*", "input": "./assets/", "output": "./assets/" },
-            { "glob": "favicon.ico", "input": "./", "output": "./" },
-            { "glob": "mdi.svg", "input": "../node_modules/@mdi/angular-material", "output": "./assets" }
-          ]
-        }
-      ]
-   }
-   ```
-
-* For Angular CLI version 6.x, make sure to include `mdi.svg` in your `assets` folder under `angular.json` in the `assets` array, located in the build configuration for your project:
-
-    ```json Angular CLI file
+    ```json Angular workspace configuration file
     {
@@ -60,3 +44,3 @@ // ...
                { "glob": "favicon.ico", "input": "./", "output": "./" },
-               { "glob": "mdi.svg", "input": "../node_modules/@mdi/angular-material", "output": "./assets" }
+               { "glob": "mdi.svg", "input": "./node_modules/@mdi/angular-material", "output": "./assets" }
              ]
@@ -70,11 +54,19 @@ }
 
-_Note: To check your version of Angular CLI, run `ng -v` or `$(npm bin)/ng -v`._
+Note that the input directory is dependent on the workspace root which can be found
+by looking at your desired project's `root` property. (For more information, visit the
+Angular documentation on [project configuration options](https://angular.io/guide/workspace-config#project-configuration-options).)
 
-### Angular
+Additionally, see the Angular documentation on [assets configuration](https://angular.io/guide/workspace-config#assets-configuration)
+for more information.
 
-The `mdi.svg` contains all the icons provided on the site. Use inline with [MatIconRegistry](https://material.angular.io/components/icon/api#MatIconRegistry).
+Note: Documentation for Angular CLI versions 1.x.x (around Angular v5) has been dropped
+as Angular v5 is [no longer supported](https://angular.io/guide/releases#support-policy-and-schedule).
 
-1. Place the SVG file under your `assets` folder thanks to Angular CLI or thanks to `CopyWebpackPlugin`. Please ensure that this file is publicly accessible.
-2. In your app's main module (typically `app.module.ts`), import `MatIconModule` and `MatIconRegistry` from `@angular/material`:
+### Angular Material
 
+The `mdi.svg` contains all the icons provided on the site. It can be used inline with
+[MatIconRegistry](https://material.angular.io/components/icon/api#MatIconRegistry).
+
+1. In your app's main module (typically `app.module.ts`), import `MatIconModule` and `MatIconRegistry` from `@angular/material/icon`:
+
 ```typescript App module
@@ -103,3 +95,5 @@
   constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer){
-    matIconRegistry.addSvgIconSet(domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')); // Or whatever path you placed mdi.svg at
+    matIconRegistry.addSvgIconSet(
+      domSanitizer.bypassSecurityTrustResourceUrl('./assets/mdi.svg')
+    );
   }
@@ -109,41 +103,13 @@ }
 
-Usage:
+2. The SVG icons can then be used with [`MatIcon`](https://material.angular.io/components/icon/api#MatIcon)'s
+`svgIcon` attribute as shown below:
 
 ```html Example Usage
-
-<!-- Icon by itself -->
-<mat-icon svgIcon="android" aria-label="Android icon"></mat-icon>
-<!-- Icon button -->
-<a mat-icon-button href="https://android.com" matTooltip="Go to Android.com" aria-label="Go to Android.com">
-  <mat-icon svgIcon="android" aria-label="Android icon"></mat-icon>
-</button>
-<!-- You can also combine an icon and text together -->
-<button mat-button>
-  <mat-icon svgIcon="code-tags" aria-label="Code icon"></mat-icon>
-  View source
-</button>
-
+<mat-icon svgIcon="<name of icon>"></mat-icon>
 ```
 
-Please also add the following class to your styles (`styles.css`) to solve the problem where an icon isn't aligned properly when used in a menu item:
+For more information about SVG icons, check out the [documentation](https://material.angular.io/components/icon/overview#svg-icons).
 
-```css styles.css
+[StackBlitz demo](https://stackblitz.com/edit/mdi-material-example)
 
-button.mat-menu-item {
-  line-height: 24px !important;
-}
-a.mat-menu-item > mat-icon {
-  margin-bottom: 14px;
-}
-.mat-icon svg {
-  height: 24px;
-  width: 24px;
-}
-
-```
-
-[Stackblitz](https://stackblitz.com/edit/mdi-material-example)
-
-For more information on icons, refer to the [icon docs](https://material.angular.io/components/icon/overview).
-
 ### AngularJS Material
@@ -150,0 +116,0 @@

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

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

Improved metrics

Total package byte prevSize

2093939

increased by2.58%

Worsened metrics

Number of lines in readme file

146

decreased by-18.89%

No dependency changes