@org.slashlib/ng-providers-mat-svg

slashlib.org - @angular/material provider for loading and displaying svg

Usage no npm install needed!

<script type="module">
  import orgSlashlibNgProvidersMatSvg from 'https://cdn.skypack.dev/@org.slashlib/ng-providers-mat-svg';
</script>

README

angular scalable vector graphics (svg) provider

Provides inline scalable vector graphics for @angular/material projects.

This projects SVG graphics are provided by:

building the library

  • Browse https://github.com/org-slashlib/ng-project-template and download (no fork required!) a zip/tar of the the project template.
  • Run npm install in the project template folder.
  • Download or fork this project and link it into the templates subfolder.
  • Run: grunt
  • Change to build directory: cd build
  • Call ng build
  • Change to dist directory: npm pack
  • npm install path/to/@org.slashlib-ng-providers-mat-svg-<version>.tgz

installing

This guide assumes, that you are familiar with the use of npm.

Download org.slashlib-ng-providers-mat-svg-<version>.tgz
and install npm install path/to/org.slashlib-ng-providers-mat-svg-<version>.tgz

or

npm install @org.slashlib/ng-providers-mat-svg --save-dev

usage

Add the following lines to your app module.

import { LocalSVGProvider }           from "@org.slashlib/ng-providers-mat-svg";
import { svgProviderFactory }         from "@org.slashlib/ng-providers-mat-svg";

@NgModule({
  imports:      [ ... ],
  declarations: [ ... ],
  providers:    [
    LocalSVGProvider,                 // inline loading of svg (icons))
    { provide:    APP_INITIALIZER,
      useFactory: svgProviderFactory,
      deps:       [LocalSVGProvider],
      multi:      true }              // load svg (icons) on app start
  ],
  bootstrap:    [ ... ]
})
export class AppModule { }

In your components html, you can now use all icons provided in version 2.2.0 of https://material.io/tools/icons/?style=baseline

<mat-icon svgIcon="svg_icon_name"></mat-icon>