Style the icon's SVG? about angular-feather HOT 8 CLOSED

Are you using version 6.0.1 ?

If yes, I'm not sure to understand the issue. For example, in the demo, if I set the width to 100% on the host element (<i-feather name="camera" style="width: 100%"></i-feather>), the icon width fills up to parent container's width.

from angular-feather.

@AndreasWJ, is the issue still actual?

from angular-feather.

Hey! Sorry for the late response.

I'm using 5.3.0 currently but the problem still persist with the lastest version as I've tried modifying the demo to resemble my problem.

Essentially the container is a dynamic height, so I do not know any set pixel value.
The angular-feather icon is then set to 'height: 100%'. With this I'm trying to achieve a responsive width depending on the container's height.
According to the dev tools the angular-feather element takes up all the height I want, yet the icon doesn't scale up.
It does, however, work if I set the nested SVG element to 'height: 100%' as well. But then the SVG overlaps the content next to the angular-feather element.

I'll try to get a codepen up and running soon to demonstrate the problem. Maybe I'm just missing something as I'm quite new to HTML/CSS.

from angular-feather.

Here's a simple example. I want the width to be decided by the icon's original aspect ratio, so I only have to set the height to a value(percentage): https://angular-feather-wieisa.stackblitz.io/

from angular-feather.

I think it should be the other way around, i.e. make the icon element fill parent's width. Then, set the height to auto so it is sized proportionally:

html

<div style="width: 200px;">  
...
  <i-feather name="heart" class="responsive"></i-feather>
...
</div>

css

.responsive {
  width: 100%;
  height: auto;
}

Or is there any reason to have to fill 100% height and have the width property unset?

from angular-feather.

In my case I have an ItemElementComponent. The component template doesn't know its height and width, height and width is set by the parent template.

Therefore based on my design it's though to determine a width value in percentage that looks good with all display widths. A better solution is make the icon be dependent solely by the height, i.e 'height: 100%' and you then let the width to be set to auto.

Essentially, throughout all displays: monitors, tablets, and phones the height is static for the ItemElementComponent, meanwhile the width is determined automatically depending on the display width. But as mentioned previously, ItemElementComponent's dimensions are set by its parent's template.

Thanks in advance!

from angular-feather.

To have the width proportional to the height, I've seen a trick using the font-size property, which, if I understand correctly, could work since the height set by the parent template is fixed.
In short, instead of setting the height or width property, the parent sets a font-size, and the icon is scaled proportionally to that font-size, using the "em" css unit.
But also, if you have containers with text in the child component, you need to reset the font-size for them.

Here is how it looks like: https://stackblitz.com/edit/angular-feather-kycc8e?file=src/app/app.component.html

I'm not sure to understand all intricacies in the use case you're describing though, so maybe this trick is of no help (but then I'm not sure what could be done besides passing a variable between components and a dynamic resize)

from angular-feather.

Thanks for the help!

Unfortunantely I haven't found a solution for the problem I'm facing. Going to take it up with a few friends to hopefully find a fix. I think it's more of a CSS to SVG issue rather than angular-feather.
Closing

from angular-feather.