Check out the live demo here.
Currently, I have implemented global icon definitions in my app component and I am reusing these icons throughout my application. While this approach is effective, I have encountered an issue with the positioning of the SVG element. Instead of displaying within the boundaries of the icon component, it appears as an empty div at the bottom of the SVG. Here's a screenshot for reference:
Below is the code snippet for the icon component:
<svg
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
[style.width]="width ? width : size"
[style.height]="height ? height : size"
[style.margin]="margin ? margin : '0'"
[style.padding]="padding ? padding : '0'"
>
<use [style.fill]="color ? color : 'white'" [attr.xlink:href]="absUrl + '#' + name"></use>
</svg>
And here is the TypeScript code for the component:
import { Component, ChangeDetectionStrategy, Input } from "@angular/core";
@Component({
selector: "icon",
templateUrl: "./icon.component.html",
styleUrls: ["./icon.component.scss"],
changeDetection: ChangeDetectionStrategy.OnPush,
})
export class IconComponent {
@Input() name: string;
@Input() size: string;
@Input() color: string;
@Input() width?: string;
@Input() height?: string;
@Input() margin?: string;
@Input() padding?: string;
get absUrl() {
return window.location.href.split("#")[0];
}
}
I have attempted to resolve the issue by adjusting the line-height and icon height properties with no success. Setting the entire icon div to hidden also does not display the SVG. Any suggestions on how to address this would be greatly appreciated. Thank you!