I have an icons.svg file that seems to contain assets that I need to use in my Angular app.
The file looks something like this (note, the ... means omitted data due to security reasons):
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><defs>
<path d="..." id="o"/></defs>
<symbol id="icon-add-member-contain-heavy" viewBox="0 0 64 64">
<path d="B0 ... 4A3q"/>
</symbol>
<symbol id="icon-add-member-contain-light" viewBox="0 0 64 64">
<path d="A5 ... 2i5m"
...
...
.../></symbol></svg>
I am trying to reference the file in my component HTML (as shown in the code below), but I don't know how to render an icon. I am guessing I need to use the id's that are shown in the above svg code, like id="icon-add-member-contain-heavy"?
<div>
<img src="../../src/assets/icons.svg">
</div>
In angular, you should be able to render the svg as a component. From the angular docs:
import { Component } from '@angular/core';
@Component({
selector: 'app-svg',
templateUrl: './svg.component.svg',
styleUrls: ['./svg.component.css']
})
export class SvgComponent {
fillColor = 'rgb(255, 0, 0)';
changeColor() {
const r = Math.floor(Math.random() * 256);
const g = Math.floor(Math.random() * 256);
const b = Math.floor(Math.random() * 256);
this.fillColor = `rgb(${r}, ${g}, ${b})`;
}
}