How to assign global styles for a specific component (Icon)?

[kboul]

I have found that changing a style globally can be achieved via customizing a theme by setting some of the colors parameters but I am not able to find how to set globally a color for a specific component, for instance the Icon component.

So I have declared:

const fluentTheme = {
    ...teamsLightTheme,
    colorSubtleBackgroundHover: "transparent", // hover bg works for all components
    colorNeutralForeground2BrandHover: "#0072ba", // changing color works for hovering 
    colorNeutralForeground2BrandPressed: "#0072ba" // is there any alternative to do that, it does not work
};

 <FluentProvider theme={fluentTheme}>
...

But this code changes every element, not only icons.

I have only managed to do it like this but I want to make this in many places so it will end up being repetitive:

<Menu open={open} onOpenChange={onOpenChange}>
           <MenuTrigger disableButtonEnhancement>
               <Tooltip content="Column visibility" relationship="label">
                   <ToolbarButton
                       icon={<TableInsertColumn16Filled color={open ? "#0072ba" : "inherit"} />}
                   />

It would be ideal if I can define the icons background color, color on hover and the clicked color as well somewhere globally.