[Icons] explain svg colors and improve example configuration

Author: dbu

src/Icons/doc/index.rst

@@ -83,6 +83,9 @@ define the HTML attributes added to the ``<svg>`` element:
     {{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }}
     {# renders <svg height="16" width="16" aria-hidden="true"> ... </svg> #}
 
+Typically, icon SVG use `fill='currentColor'` to inherit the color of the containing
+element. You can use CSS to set the color either on the containing element or in a class
+or style attribute of the icon itself.
 
 Icon Sets
 ~~~~~~~~~
@@ -324,17 +327,17 @@ added to all icons unless overridden by the second argument of the ``ux_icon`` f
     # config/packages/ux_icons.yaml
     ux_icons:
         default_icon_attributes:
-            fill: currentColor
+            style: "color: white;"
 
-Now, all icons will have the ``fill`` attribute set to ``currentColor`` by default.
+Now, all icons will have the ``style`` attribute set to ``color: white;`` by default.
 
 .. code-block:: twig
 
-    # renders "user-profile.svg" with fill="currentColor"
+    # renders "user-profile.svg" with style="color: white;"
     {{ ux_icon('user-profile') }}
 
-    # renders "user-profile.svg" with fill="red"
-    {{ ux_icon('user-profile', {fill: 'red'}) }}
+    # renders "user-profile.svg" with style="color: red"
+    {{ ux_icon('user-profile', {style: 'color: red;'}) }}
 
 Icon Aliases
 ~~~~~~~~~~~~
@@ -546,7 +549,7 @@ Full Configuration
 
         # Default attributes to add to all icons
         default_icon_attributes:
-            fill: currentColor
+            style: 'color: white;'
             'font-size': '1.25em'
 
         # Icon aliases (alias => icon name)