marcuscalidus / ts-material-icons-svg Goto Github PK

Hi,

When I use the

import { icon_x } from 'ts-material-icons-svg/dist/outline'

format and run ng build --prod, the output folder has hundreds of svg icons in the root.

I tried using the other syntax

import icon_x from 'ts-material-icons-svg/svg/outline/x.svg'

and get an error when MatIconRegistry tries to create the reference because the value of .url is undefined.

In both cases, I am using this code:

const iconsToImport = [{ name: 'x', url: icon_x }];
...
export class AppModule {
  constructor(matIconRegistry: MatIconRegistry, domSanitizer: DomSanitizer) {
    iconsToImport.forEach(icon => {
      matIconRegistry.addSvgIcon(
        icon.name,
        domSanitizer.bypassSecurityTrustResourceUrl(icon.url)
      );
    });
  }
}

The error shown is:

Error: The URL provided to MatIconRegistry was not trusted as a resource URL via Angular's DomSanitizer. Attempted URL was "SafeValue must use [property]=binding: undefined (see http://g.co/ng/security#xss)".
    at getMatIconFailedToSanitizeUrlError (icon.es5.js:50)
    at MatIconRegistry.push

What am I doing wrong in both cases? TIA

I dont understand the documentation regarding jest tests - i get a lot of errors regarding icons. Starting with:
console.error ERROR Error: Error retrieving icon :keyboard_arrow_left! Unable to find icon with the name ":keyboard_arrow_left" at SafeSubscriber._error (/Users/bjoernwiegell/programmering/angproj/monorepo/packages/src/material/icon/icon.ts:435:44)