to work with .svg I know differents ways
<img src="img.svg">
//or
<svg class="bi " width="1rem" height="1rem" fill="currentColor" >
<use xlink:href="bootstrap-icons.svg#menu-app" />
</svg>
//or
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15">
<path fill="currentColor" d="M3.5,0l-1,5.5c......></path>
</svg>
or using fortAwesome, you can in the app.module use some like
import { library } from '@fortawesome/fontawesome-svg-core';
var faMyIcon = {
prefix: "fas",
iconName: "myIcon",
icon: [
15,
15,
[],
"f0000",
"M3.5,0l-1,5.5c-0.1464,0.805,1.7815,1.181,1.75,2L4,14c-0.0384,0.9993,1,1,1,1s1.0384-0.0007,1-1L5.75,7.5 c-0.0314-0.8176,1.7334-1.1808,1.75-2L6.5,0H6l0.25,4L5.5,4.5L5.25,0h-0.5L4.5,4.5L3.75,4L4,0H3.5z M12,0c-0.7364,0-1.9642,0.6549-2.4551,1.6367C9.1358,2.3731,9,4.0182,9,5v2.5c0,0.8182,1.0909,1,1.5,1L10,14c-0.0905,0.9959,1,1,1,1s1,0,1-1V0z"
]
};
....
export class AppModule {
constructor() {
library.add(faMyIcon);
}
}
And use as
<fa-icon [icon]="['fas', 'myIcon']"size="6x"></fa-icon>
I don't know if this help you or not