How to inject SVG icon sprites in Angular component HTML DOM?

Question

I am building an Angular application (Angular 4/5/6) and would like to use SVG sprites in my component template.

Question: Assuming I already have my S

Answer 1

you can convert your svg file to font by https://icomoon.io/app/#/select, upload your svg file and select it,click on the Generate Font then click the download button, download font file and choose font folder and put it in a folder in your project,

import font file into css files

@font-face {
   font-family: 'icomoon';
   src:  url('fonts/icomoon.eot?31svmk');
   src:  url('fonts/icomoon.eot?31svmk#iefix') format('embedded-opentype'),
   url('fonts/icomoon.ttf?31svmk') format('truetype'),
   url('fonts/icomoon.woff?31svmk') format('woff'),
   url('fonts/icomoon.svg?31svmk#icomoon') format('svg');
  font-weight: normal;
  font-style: normal;
}

declear your class like this

.icon-home:before {
  content: "\ea77";
}
.icon-conection:before {
  content: "\ea78";
}
.icon-rocket:before {
 content: "\ea79";
}

and use it in your html

  
Icon (rocket):  

The solution was to add the icons in the project, but if you want to use the svg code in the project, it's best to add the loader to it.

If you have used the webpack:

  npm install svg-inline-loader --save-dev

Simply add configuration object to module.loaders like this.

{
    test: /\.svg$/,
    loader: 'svg-inline-loader'
}

more info