I am using Angular 12 with ng-inline-svg. My .svg files are stored in the src/assets folder.
SVG location (TypeScript):
angleIconUrl = '${environment.assetsPath}assets/media/svg/icons/Navigation/Angle-double-left.svg';
( The environment.assetsPath
contains either '/' or 'dashboard/' (dev assets and production assets)
Inline SVG (HTML):
<span class="svg-icon svg-icon-xl" (onSVGFailed)="fail($event)" [inlineSVG]="angleIconUrl"></span>
Instead of displaying the provided svg, I get the following error: No SVG found in loaded contents.
When I try to use the same angleIconUrl on an img-tag with an src-attribute it works.
I already tried to add the svg files to the assets in my angular.json file but it does not work anyway.
"assets": [
"src/favicon.ico",
"src/assets",
"src/.htaccess",
"src/assets/media/svg/icons/Navigation/Angle-double-left.svg"
],
I had shared svg icons stored in the apps/shared/assets/icons/*. For angular 14 this worked:
in angular.json:
the path to the icon in html:
and added svg mime type on the server: