Angular reusable component that displays SVG icons has width/height not set anywhere & positioned right under the icon, stackblitz inside

Question

So I'm using global icon-definitions loaded in app component once and then poiting to it throughout my app with this reusable icon.

For the most part it works well & nice but for some reason I noticed that the positioning of the SVG is outside the boundaries of the icon component and instead it shows up as some empty div at the bottom of the SVG, screenshot:

This is the relevant icon component code:

<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 the actual ts code:

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've tried to set line-height and icon height to 0 with !important which does not work/affect anything at all.

However if I set the whole icon div to hidden, the SVG won't display either.

Not sure what else to try, thanks!

score 1 · Accepted Answer · answered Jun 05 '20 at 14:32

1

Svg is an inline element. inline elements leave white-space. If you set display:block on svg element or icon component it will be fixed.

Try this:

icon.component.scss

:host{
  display: block;
}

Forked Example

Detailed Explanation

answered Jun 05 '20 at 14:32

Chellappan வ

23,645
3
29
60

Hmm, any reason for going with block in particular? flex seems to achieve somewhat the same result -- anyhow, thanks, this fixes it! – SebastianG Jun 05 '20 at 21:29
You are welcome!!!. display:block will not make any difference if you have only one svg inside icon component. – Chellappan வ Jun 06 '20 at 04:58

Angular reusable component that displays SVG icons has width/height not set anywhere & positioned right under the icon, stackblitz inside

1 Answers1