Angular library SVG icons

[wind sluice]

What's the best way to include custom SVG icons in an angular library? I know you can add them to assets but it requires glob copy in the app angular json. Is there an easy way to integrate it without hardcoding the SVG?

[pulsar elm]

One way is: https://angular.io/guide/svg-in-templates

[warm cypress]

If you are using Angular Material, walk with me:

[warm cypress]

1. First of all create a folder in your assets directory, , in this case..let's call it svg.
2. Add another directory json, inside assets.
3. Create icon.json file inside json directory.
4. Add names of yours svg icons in icon.json
   for example

{
  "solid": [
    "home.svg",
    "bell.svg" 
  ]
}

Now that you have all necessary files setup, you can create a service or directly importing icon.json file in app.component.ts. I like using service for local files... then just follow the code below

import { Component } from '@angular/core'
import { Meta, SafeResourceUrl } from '@angular/platform-browser'
import { MatIconRegistry } from '@angular/material/icon'
import { DomSanitizer } from '@angular/platform-browser'

// Using service
import { StorageService } from 'path-to-your/storage.service'
// Or directly
import icons from 'src/assets/json/icons.json'

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss'],
})
export class AppComponent {
  constructor(
    private readonly _metaService: Meta,
    private readonly _matIconRegistry: MatIconRegistry,
    private readonly _domSanitizer: DomSanitizer,
    private readonly _storageService: StorageService
  ) {
    this._metaService.addTags(
      [
        { name: 'keywords', content: 'Ads, ad, Malawi, ' },
        { name: 'robots', content: 'index, follow' },
        { charset: 'UTF-8' },
      ],
      true
    );

    const icons = [
      ...this._storageService.icons.bold,
      ...this._storageService.icons.regular,
      ...this._storageService.icons.solid,
      ...this._storageService.icons.brands,
    ];

    for (const icon of icons) {
      this._matIconRegistry.addSvgIcon(icon, this._sanitizeIcon(icon));
    }
  }

  private _sanitizeIcon(icon: string): SafeResourceUrl {
    return this._domSanitizer.bypassSecurityTrustResourceUrl(
      `assets/svg/${icon}.svg`
    );
  }
}

[pulsar elm]

you have to put
```ts
All on one line for the syntax highlighting to work.

[wind sluice]

@pulsar elm hey but that's essentially copy paste icon's content

No way to reference by url and compile it to literal on build?

Worst case I can fallback to assets glob but wanted to avoid that

@warm cypress I don't have a mat icon dependency

[pulsar elm]

you reference it by <app-my-icon></app-my-icon> same as any other component

[wind sluice]

And the SVG content is built in the component template

Well I guess it's one way to look at it as SVG as component

[warm cypress]

I guess creating a component add then load svg dynamically can solve that. the same way Angular Material works, for example <icon svg="home"></icon>.

[wind sluice]

@pulsar elm Ng packager has no icons compilation to code on build or something similar?

[wind sluice]

Still requires assets glob

[pulsar elm]

You can just do svg normally

[wind sluice]

That means to copy paste the SVG file to html

[pulsar elm]

I don't really understand your complaint about "requires glob copy in the app angular json. Is there an easy way to integrate it without hardcoding the SVG?"

you can have .svg files.

[wind sluice]

What do you mean?

Wanted to avoid the apps using the library from adding assets copy to angular json

[pulsar elm]

https://developer.mozilla.org/en-US/docs/Web/SVG/SVG_as_an_Image

https://www.npmjs.com/package/svg-icon

https://github.com/vvaldersteins/ngx-svg

[wind sluice]

@pulsar elm got it thanks! Guess it's either an SVG component with the SVG code literally inside or assets glob

[pulsar elm]

Angular doesn't really have much to say about how websites manage SVG assets 🙂