Can't apply global styles to <i-feather> component about angular-feather HOT 5 CLOSED

@TheLordDrake

It's possible to take precedence over the existing inline styles of <i-feather> with the !important keyword:

i-feather {
  height: 50px !important;
  width: 50px !important;
}

Alternatively, since all svg elements of the library have the feather css class you can also do that:

.feather {
  height: 50px;
  width: 50px;
}

The svg element is under i-feather and has no inline width or height on it, so in this case no need for !important.

In addition, svg elements also have a feather-{name} class, so you can target specific icons if you need:

.feather {
  height: 50px;
  width: 50px;
}

.feather-heart {
  color: red;
}

Let me know if this answers your question.

from angular-feather.

Use of !important would prevent making adjustments to individual icons as needed and should generally be avoided.

I did try the .feather class and had the same issue with it.

I wasn't aware of the feather-{name} classes, so as yet I haven't tried those.

I was able to get it working by wrapping the <i-feather> component in another local component and applying a global style to that component. These seems to be working and does allow local overrides if needed.

from angular-feather.

If you can reproduce the issue, using the feather class, I can take a look at it.

from angular-feather.

I can no longer duplicate it. So either my memory has failed me or there was something with my configuration that has since changed. Either way I think it's safe to say this is a non issue now.

from angular-feather.

I tried as well using the feather class, and could not reproduce the issue. Therefore, I also think it's safe to close it now. Thanks for your quick follow-up 👍

from angular-feather.