diff --git a/src/Icons/doc/index.rst b/src/Icons/doc/index.rst index a20222fd244..30ddd8f6599 100644 --- a/src/Icons/doc/index.rst +++ b/src/Icons/doc/index.rst @@ -83,6 +83,21 @@ define the HTML attributes added to the ```` element: {{ ux_icon('user-profile', {height: '16px', width: '16px', 'aria-hidden': true}) }} {# renders #} +.. note:: + + Without size instructions, ```` 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 `. Icon Sets ~~~~~~~~~ @@ -313,6 +328,8 @@ HTML Syntax ``symfony/ux-twig-component`` is required to use the HTML syntax. +.. _icons_default_attributes: + Default Attributes ~~~~~~~~~~~~~~~~~~