Custom SVG Icons

This is a collection of icons you define in the icons.defs.svg file for use in an Angular project using Material.

The icons.defs.svg (that contains all your icons) must be located in your assets folder.

To create custom icons from an SVG please refer to Creating an Icon Set

Installation

npm install custom-svg-icons

Usage

Import the Module into the module that you need the icons - if you wish, you can import at the app level for global usage.

CustomSVGIconsModule

Here is a sample of the import

@NgModule({
  declarations: [
    AppComponent,
  ],
  imports: [
    MaterialModule,
    BrowserModule,
    AppRoutingModule,
    BrowserAnimationsModule,
    ...
    CustomSVGIconsModule,
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Once imported use the following syntax for the icon

<mat-icon svgIcon="icon-book-solid"></mat-icon>

Creating or Adding to an Icon Set

Here is a service you can use to manage icons sets. This is not nessessary if you understand the strcture of the icons-defs.svg file, which is simply a list of SVG files

Here is what the file structure looks like. You add your SVG files between the <defs></defs> tags

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

  <defs>

    <symbol id="icon-file-arrow-up-solid" viewBox="0 0 24 32">
    <path d="M16 0v8h8l-8-8zM14 8v-8h-11c-1.657 0-3 1.343-3 3v26c0 1.656 1.343 3 3 3h18c1.657 0 3-1.343 3-3v-19h-7.944c-1.162 0-2.056-0.894-2.056-2zM18.006 21.506c-0.238 0.35-0.619 0.494-1.006 0.494s-0.767-0.146-1.061-0.439l-2.439-2.442v6.381c0 0.828-0.672 1.5-1.5 1.5s-1.5-0.672-1.5-1.5v-6.381l-2.439 2.439c-0.586 0.586-1.535 0.586-2.121 0s-0.586-1.535 0-2.121l5-5c0.586-0.586 1.535-0.586 2.121 0l5 5c0.583 0.588 0.583 1.538-0.054 2.069z"></path>
    </symbol>

  </defs>

</svg>

Now you can use any declared icon in your symbol-def.svg throughout your app. Notice that all the icon names are prefixed with “icon-” so if you named something “pen” on the IcoMoon interface, it is now accessible with the name “icon-pen”.

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

Online Icon Tool

There is a tool you can use that does the same thing. The tool also allows you to get icons from other well known icon sets such as FavIcons and Others. You can merge these icons togther to form you own custom set.

• Goto https://icomoon.io and create an icon set and download the file

• Copy the icons.defs.svg file into the assets folder