How to use assets (images) in angular libraries?

[mtvspec]

I can add images in lib, and it works in serve mode, but when I start building lib for production, build crushes with error
NX 'assets' is not found in schema.

Library project.json

{
  "name": "shared-ui-buttons",
  "$schema": "../node_modules/nx/schemas/project-schema.json",
  "projectType": "library",
  "sourceRoot": "libs/shared-ui/buttons/src",
  "prefix": "vyllyv",
  "targets": {
    "build": {
      "executor": "@nrwl/angular:ng-packagr-lite",
      "outputs": ["{workspaceRoot}/dist/{projectRoot}"],
      "options": {
        "project": "libs/shared-ui/buttons/ng-package.json",
        "assets": ["libs/shared-ui/buttons/src/assets"]
      },
      "configurations": {
        "production": {
          "tsConfig": "libs/shared-ui/buttons/tsconfig.lib.prod.json"
        },
        "development": {
          "tsConfig": "libs/shared-ui/buttons/tsconfig.lib.json"
        }
      },
      "defaultConfiguration": "production"
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "libs/libs/shared-ui/buttons/jest.config.ts",
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": [
          "libs/libs/shared-ui/**/*.ts",
          "libs/libs/shared-ui/**/*.html"
        ]
      }
    }
  },
  "tags": []
}

App project.json

{
  "name": "admin",
  "$schema": "../node_modules/nx/schemas/project-schema.json",
  "projectType": "application",
  "sourceRoot": "apps/admin/src",
  "prefix": "admin",
  "targets": {
    "build": {
      "executor": "@angular-devkit/build-angular:browser",
      "outputs": ["{options.outputPath}"],
      "options": {
        "outputPath": "dist/apps/admin",
        "index": "apps/admin/src/index.html",
        "main": "apps/admin/src/main.ts",
        "polyfills": ["zone.js"],
        "tsConfig": "apps/admin/tsconfig.app.json",
        "inlineStyleLanguage": "scss",
        "assets": [
          "apps/admin/src/favicon.ico",
          "apps/admin/src/assets",
          {
            "input": "libs/shared-ui/buttons/src/assets",
            "glob": "**/*",
            "output": "assets/shared-ui/buttons"
          }
        ],
        "styles": [
          "./node_modules/@angular/material/prebuilt-themes/indigo-pink.css",
          "./node_modules/semantic-ui-button/button.css",
          "./node_modules/semantic-ui-table/table.css",
          "./node_modules/highlight.js/scss/github-dark-dimmed.scss",
          "apps/admin/src/styles.scss"
        ],
        "scripts": []
      },
      "configurations": {
        "production": {
          "budgets": [
            {
              "type": "initial",
              "maximumWarning": "500kb",
              "maximumError": "1mb"
            },
            {
              "type": "anyComponentStyle",
              "maximumWarning": "2kb",
              "maximumError": "4kb"
            }
          ],
          "outputHashing": "all"
        },
        "development": {
          "buildOptimizer": false,
          "optimization": false,
          "vendorChunk": true,
          "extractLicenses": false,
          "sourceMap": true,
          "namedChunks": true
        }
      },
      "defaultConfiguration": "production"
    },
    "serve": {
      "executor": "@angular-devkit/build-angular:dev-server",
      "options": {
        "port": 4220
      },
      "configurations": {
        "production": {
          "browserTarget": "admin:build:production"
        },
        "development": {
          "browserTarget": "admin:build:development"
        }
      },
      "defaultConfiguration": "development"
    },
    "extract-i18n": {
      "executor": "@angular-devkit/build-angular:extract-i18n",
      "options": {
        "browserTarget": "admin:build"
      }
    },
    "lint": {
      "executor": "@nrwl/linter:eslint",
      "outputs": ["{options.outputFile}"],
      "options": {
        "lintFilePatterns": ["apps/admin/**/*.ts", "apps/admin/**/*.html"]
      }
    },
    "test": {
      "executor": "@nrwl/jest:jest",
      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
      "options": {
        "jestConfig": "apps/admin/jest.config.ts",
        "passWithNoTests": true
      },
      "configurations": {
        "ci": {
          "ci": true,
          "codeCoverage": true
        }
      }
    }
  },
  "tags": ["scope:admin"]
}

How assets used in library

<app-button-icon>
  <img src="/assets/shared-ui/buttons/close.svg" alt="close" />
</app-button-icon>

[jakehockey10]

Did you ever figure this out? VSCode is preventing me from even adding "assets" to the project.json due to the lack of it being defined in the schema from nx.

[dimitriy-k]

any solution on that? I want to have icons library, so need to add svg sprite to the build (angular)