מדריך הטמעה של SVG כחלק מקוד פרויקט באנגולר

export const approve = `
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="30"
   height="30"
   viewBox="0 0 7.9374998 7.9375002"
   version="1.1">
  <title>approve</title>
  <defs/>
  <metadata>
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>approve</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g>
    <path
       d="M 1.7629193,4.2510784 0.57052571,3.8668785 3.1661113,7.4259435 7.4414062,0.28938802 3.1661113,5.7291038 Z"
       style="fill:inherit;stroke:inherit;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
  </g>
</svg>
`
export const cancel = `
<svg
   xmlns:dc="http://purl.org/dc/elements/1.1/"
   xmlns:cc="http://creativecommons.org/ns#"
   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   width="30"
   height="30"
   viewBox="0 0 7.9374998 7.9375002"
   version="1.1">
  <title>approve</title>
  <defs/>
  <metadata>
    <rdf:RDF>
      <cc:Work
         rdf:about="">
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
        <dc:title>approve</dc:title>
      </cc:Work>
    </rdf:RDF>
  </metadata>
  <g>
    <path
       d="M 1.7629193,4.2510784 0.57052571,3.8668785 3.1661113,7.4259435 7.4414062,0.28938802 3.1661113,5.7291038 Z"
       style="fill:inherit;stroke:inherit;stroke-width:0.264583px;stroke-linecap:butt;stroke-linejoin:round;stroke-opacity:1" />
  </g>
</svg>
`

import { Component, OnInit } from '@angular/core';
import { DomSanitizer, SafeHtml } from '@angular/platform-browser';
import * as svgIcons from '../../../share/svgs/icons-svg';
@Component({
  selector: 'app-popup-slogan',
  templateUrl: './slogan-popup.component.html',
  styleUrls: ['./slogan-popup.component.scss']
})
export class SloganPopupComponent implements OnInit {
 cancel: SafeHtml;
 approve: SafeHtml;
 constructor(private sanitizer: DomSanitizer) {
    this.cancel = this.sanitizer.bypassSecurityTrustHtml(svgIcons.cancel);
    this.approve = this.sanitizer.bypassSecurityTrustHtml(svgIcons.approve);
 }
  
}

 <div class="action-wrapper">
   <button class="submit" type="button" (click)="onSave()" [disabled]="!form.valid">
     <span class="icon" [innerHtml]="approve"></span>אישור</button>
   <button class="cancel" type="button" (click)="onCancel()">
     <span class="icon" [innerHtml]="cancel"></span>ביטול</button>
 </div>

  svg {
        width: 100%;
        height: 100%;
    }
 .icon {
        width: 20px;
        height: 20px;
        display: inline-block;
        fill: red;
        stroke: blue;
    }