How to integrate icons into an angular library?

Question

I would like to integrate an SVG icons into my angular library's template, and I have the following questions?

Where should the /assets folder be located? Should it reside under /src or /src/lib within the library structure?
What modifications are required in the ng-package.json and/or angular.json files?
How should SVG icons be referenced in the component templates? Should they be referenced using relative paths, absolute paths, or does it not matter?

How can I achieve this, please?

Nikhil Makwana · Accepted Answer · 2024-09-22 19:10:12Z

1

Where should the /assets folder be located?

In an Angular library, the recommended location for the /assets folder is under /src, not /src/lib. This ensures that the assets are bundled correctly when the library is built and consumed in applications.

Structure: projects/src/assets/icons/icon.svg

ng-package.json and/or angular.json Modifications

angular.json

{
  "projects": {
    "library-name": {
      "architect": {
        "build": {
          "options": {
            "assets": [
              {
                "glob": "**/*",
                "input": "src/assets",
                "output": "assets"
              }
            ]
          }
        }
      }
    }
  }
}

ng-package.json

{
  "$schema": "../../node_modules/ng-packagr/ng-package.schema.json",
  "assets": [
    "src/assets"
  ]
}

In the component templates

Use a relative path like this

<img src="assets/icons/my-icon.svg" alt="My Icon">

Use relative paths ensures that the assets are packaged with the library and work seamlessly when the library is consumed in different environments.

answered Sep 22, 2024 at 19:10

Nikhil Makwana

1,0645 gold badges17 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

abdou_behind_the_code Over a year ago

Thank you for your answer although your solution seems to not work. The console shows the following error: "GET localhost:4200/assets/icons/my-icon.svg 404 (Not Found)".

Collectives™ on Stack Overflow

How to integrate icons into an angular library?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related