# 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