updated “Color” section in “How to use” for Hds::Icon

Author: didoo

website/docs/components/icon/partials/code/how-to-use.md

@@ -36,13 +36,21 @@ The default size is 16px. To use the alternative 24px icon size, set the `@size`
 
 ### Color
 
-The default value is `currentColor` which uses the inherited text color as the icon color. When setting a custom value, we recommend using one of the pre-defined variables to ensure consistency with our design language:
+The default value is `currentColor` which uses the inherited text color as the icon color. When setting a custom value, we recommend using one of the pre-defined **foreground** color variables to ensure consistency with our design language:
 
 ```handlebars
-<Hds::Icon @name="zap" @color="var(--token-color-foreground-success)" />
+<Hds::Icon @name="zap" @color="success" />
 ```
 
-Other accepted values include named colors and color values themselves (e.g., hex, rgb, etc).
+For the list of possible foreground colors supported, refer to the [Component API](#component-api) section for details.
+
+It’s also possible to provide a CSS color as string (in this case the color will be applied as SVG `fill` property). The string can be a CSS `var()` that uses one of the [predefined color tokens](/foundations/colors?tab=palette):
+
+```handlebars
+<Hds::Icon @name="zap" @color="var(--token-color-boundary-brand)" />
+```
+
+Or it can be one of the standard CSS color formats (hex, rgb, rgba, hsl, named color, etc.):
 
 ```handlebars
 <Hds::Icon @name="zap" @color="rebeccapurple" />
@@ -52,6 +60,12 @@ Other accepted values include named colors and color values themselves (e.g., he
 <Hds::Icon @name="zap" @color="rgb(46, 113, 229)" />
 ```
 
+!!! Warning
+
+We don’t validate the CSS color string to ensure that the value used is correct.
+
+!!!
+
 ### Stretched
 
 To have the icon fill the parent container (width: 100%, height: 100%), set the `@stretched` attribute to true: