Thanks for sharing the issue — to resolve this issue you can try to follow these steps:

1. Use Relative Paths with SCSS Interpolation
   Wrap your asset path in #{ } to prevent Angular's build system from processing the URL at compile time. This ensures the path remains unchanged in the final CSS:

   content: url(#{'vx-grid-assets/icons/indeterminate-box.svg'});
   

   This syntax bypasses Angular's path resolution during build while preserving the correct relative path for runtime.

2. Verify Asset Configuration
   Ensure your angular.json correctly maps assets to the output directory:

   {
     "glob": "**/*",
     "input": "./common-libraries/vx-grid/vx-grid-resources/assets",
     "output": "vx-grid-assets"
   }
   

   This copies assets to dist/vx-grid-assets/ during build.

3. Deployment to Salesforce
   Since Salesforce serves static resources from a unique base path (e.g., /resource//), relative paths like vx-grid-assets/... will resolve correctly at runtime. Avoid absolute paths (e.g., /vx-grid-assets/...), as they break in Salesforce's environment.

Why This Works

• Build-Time vs. Runtime: Angular’s SCSS processor attempts to resolve asset paths during compilation, which fails for external paths (like those in Salesforce). Using #{ } defers path resolution to runtime[5].
• Salesforce Static Resources: Relative paths (vx-grid-assets/...) align with Salesforce’s serving model, where resources are relative to the app’s root in the static archive.

Example Implementation

// Component SCSS
.my-icon {
  &::before {
    content: url(#{'vx-grid-assets/icons/indeterminate-box.svg'});
    width: 16px;
    height: 16px;
  }
}

Troubleshooting

• Build Errors: If Angular still complains, double-check:
  • Typos in the asset path.
  • Correct input/output paths in angular.json.
• Runtime 404s:
  • Inspect the network tab to verify the resolved URL matches [salesforce-domain]/resource/.../vx-grid-assets/icons/....
  • Ensure the SVG is copied to dist/vx-grid-assets/ after building.

This approach balances Angular’s build requirements with Salesforce’s static resource constraints, ensuring icons load in both environments.