grommet-icons | Iconography for Grommet and React.js | Frontend Framework library

I have an Upvote component in my React/TypeScript app that allows user to upvote a post, or remove their upvote. the upvote itself is an icon from the react-icons package, specifically from the Grommet-Icons section. When a user upvotes a post by clicking on the icon, I dynamically change the fill of the icon like this:

I'm new to Grommet with styled components. I Have already checked all the docs and can't find the solution.

PROBLEM

I have an Anchor with an icon and a label. Problem is I cannot target the icon for styling when i hover or it is active. Text / Label changes the styling though. How can i achieve/fix this?

I've also tried using styled components and putting an Icon and a Text inside a Grommet Box, but didn't work.

Please help!

The component must be part of the actions column and be rendered for the "workflow" type The component should be able to render only a button, which when clicked starts the workflow configured in the action, OR a dropdown with different options which when clicked start the workflow with the clicked option as the workflow arguments The component should use the connectWorkflow decorator, which adds different props for interacting with the workflows API, e.g. startFlow, resumeFlow. The functions and their arguments can be seen in the WorkflowManager class When the user clicks the button or an option the component should call the startFlow function from the props, with the workflowPath configured in the action The component should be able to pass input data to the workflow, that is retrieved from the specific table row data. It should be able to accept an option in the action definition in the ListPage columns prop, that is an Object which will be passed as the input data to the startFlow function. Before being passed any key or value from this object should be checked if there are some values in them that should be replaced with the table row's data