[Icons] explain svg size

Author: dbu

src/Icons/doc/index.rst

@@ -83,6 +83,21 @@ 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> #}
 
+.. note::
+
+    Without size instructions, ``<svg>`` elements will be dynamically sized by the browser.
+    For icons, we therefore recommend to explicitly set the size. This can be done with a
+    CSS class or a height attribute in pixels, with variables of your CSS framework or using
+    ``em`` to set the size in relation to the font size of the current element.
+
+    Note that it is enough to specify the height, the width will be adjusted accordingly:
+
+    .. code-block:: twig
+
+        {{ ux_icon('user-profile', {style: 'height: 1em;'}) }}
+
+    For a consistent look, you might want to set the size through a
+    :ref:`default attribute <icons_default_attributes>`.
 
 Icon Sets
 ~~~~~~~~~
@@ -313,6 +328,8 @@ HTML Syntax
 
     ``symfony/ux-twig-component`` is required to use the HTML syntax.
 
+.. _icons_default_attributes:
+
 Default Attributes
 ~~~~~~~~~~~~~~~~~~