I am trying to dynamically change the color of elements in my navbar by creating a filter in my typescript code. I have a string with values like 'greyscale(73%) saturate(1400%)'. How can I apply this string to the fa-icon's filter property in the CSS?
<div>
<button class="button button-clear" style="margin: 5px;" routerLinkActive="active"
[routerLink]="[buttonData.route]" [ngbTooltip]="buttonData.route">
<fa-icon [icon]="buttonData.icon" class="fa-2x p-3"></fa-icon>
</button>
</div>
.active {
border: white 3px;
transform: scale(1.2, 1.2);
fa-icon {
filter: invert(100%) brightness(50%) sepia(100%) saturate(10000%);
}
}
export class NavbarButtonComponent implements OnInit {
filter: string;
@Input() buttonData: NavbarButtonData;
constructor() { }
ngOnInit() {
this.filter = hexToCSS(this.buttonData.highlightColor).filter;
}
}