I am using Google Material icons for a project and exporting the icons using Figma.
In the Angular application I am using a sprite sheet to reference each icon like so:
<svg xmlns=""> <symbol viewBox="0 0 24 24"> <title>Some Icon</title> <path fill="currentColor" d="paths..."/> </symbol> <symbol viewBox="0 0 24 24"> <title>Another Icon</title> <path fill="currentColor" d="paths...." /> </symbol> </svg> CSS definition.
svg.icon{ display: inline-block; width: 47px; height: 47px; fill: #000; } svg-icon.component.html
<svg attr.fill="{{ fill }}" attr.class="{{ iconClass }}"> <use attr.href="assets/{{ sheetType }}-sprite-sheet.svg#{{ icon }}"></use> </svg> svg-icon-component.ts
export class SvgIconComponent { @Input() icon!: string; @Input() fill?: string; @Input() iconClass?: string; @Input() sheetType: 'primary' | 'secondary' = 'primary'; } In the child component
<app-svg-icon [icon]="iconName" [iconClass]="'icon'" ></app-svg-icon> What I am currently receiving is a misaligned icon inside the bounding box making alignment of the icons very difficult/impossible. The SVG icon does not fill the bounding box but rather has a static size that it was imported at, and the viewbox gets changed to allow the icon to be fully visible and not clipped rather than expand with the size of the icon.
Even exporting the vector from Figma, without any kind of viewbox/bounding box, I still run into the vector dimensions being static and initially fixed rather than being defined by the SVG styling.
