CSS fill property makes no impact on the icon

[remy90]

Summary:
I would expect an SVG to fill an icon when the "fill" property is applied.

Details:
I'm attempting to use the 'favorite' icon and provide feedback to the user when they have pressed it. The icon, by default shows the outline of a heart symbol. When the css property 'fill' is applied, I would like 'favorite' to fill with the assigned colour.

I'm unsure if this has ever worked but I've tested it in dev tools and it looks like fill is hard coded to 'none' and it seemingly isn't passed the prop...

Using:

"grommet-icons": "^4.5.0"
"react": "^17.0.1"
"next": "^10.0.2"

Simple repro:

<Button icon={<Icons.Favorite color="red" fill="red" />}  />

It would be preferable not to require a separate icon for this. As a side note, if this is intended, perhaps more information could be presented in your documentation? It inherits from SVGAttributes if I've followed the chain correctly, which has made me assume this is a bug

[remy90]

Similar to #127 #208

[ShimiSun]

Here is an example of how to fill an icon color https://codesandbox.io/s/o7wjvrj3wy?file=/components/restaurant-card.js:328-523

const filledIcon = css`
  path[fill="none"] {
    fill: ${props => props.theme.colors["dark-4"]};
  }
`;

const CardFavorite = styled(Favorite)`
  ${props => (props.checked ? filledIcon : "")}
`;

[taysea]

Labeling this with enhancement/discussion to determine if we would want to support this as a property on an icon or if filled versions should be separate icons themselves.

Related to #274