[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Performance issue
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request
[ ] Other... Please describe:
Current behavior
<svg-icon> adds style="color: var(--svg-icon-color)" to the element, even if color is undefined. This forces us to write code like this which looks very ugly. Since the element has a color in the style property, this would then override css-classes that tried to change the color of the icon.
@Component({
selector: 'hpi-icon',
// Even if color is undefined, <svg-icon> would add style="color: var(--svg-icon-color)" to the element which defaulted to a white icon.
// This is a temporary fix until this is (hopefully) fixed
template: `
<svg-icon *ngIf="color" [key]="key" [fontSize]="fontSize" [color]="color"></svg-icon>
<svg-icon *ngIf="!color" [key]="key" [fontSize]="fontSize"></svg-icon>
`,
styles: [
`
svg-icon {
color: var(--color-grey-1100);
line-height: 1;
vertical-align: middle;
}
`
]
})
export class IconComponent {
@Input() key: SvgIcons;
@Input() color: string | undefined;
@Input() fontSize: string | undefined;
@Input() set size(size: IconSize) {
this.fontSize = iconSizes[size];
}
}
Expected behavior
if @Input color of <svg-icon> is undefined it should not add any color styling at all to the DOM element.
Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment
Angular version: 14.1.1
"@ngneat/svg-icon": "^6.3.0",
Browser:
- [x ] Chrome (desktop) version XX
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [ ] Firefox version XX
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [ ] IE version XX
- [ ] Edge version XX
For Tooling issues:
- Node version: 16
- Platform: Mac
I'm submitting a...
Current behavior
<svg-icon>
addsstyle="color: var(--svg-icon-color)"
to the element, even ifcolor
isundefined
. This forces us to write code like this which looks very ugly. Since the element has a color in the style property, this would then override css-classes that tried to change the color of the icon.Expected behavior
if
@Input color
of<svg-icon>
is undefined it should not add any color styling at all to the DOM element.Minimal reproduction of the problem with instructions
What is the motivation / use case for changing the behavior?
Environment