From 52d32fbc0e4d57bea0f811fc59bdcc0e99187cc1 Mon Sep 17 00:00:00 2001 From: Steven Renaux Date: Mon, 15 Sep 2025 15:44:08 +0200 Subject: [PATCH] [Icons] Add documentation on icons colors --- src/Icons/doc/index.rst | 27 +++++++++++++++++++++++++-- 1 file changed, 25 insertions(+), 2 deletions(-) diff --git a/src/Icons/doc/index.rst b/src/Icons/doc/index.rst index 7178fe29a73..8f7fc770e90 100644 --- a/src/Icons/doc/index.rst +++ b/src/Icons/doc/index.rst @@ -112,9 +112,31 @@ the size of all your icons from a single place. Icon Color ~~~~~~~~~~ -Typically, SVG icons use ``fill="currentColor"`` to inherit the color of the containing element. -You can set the color in CSS on the container or directly on the SVG element/class. +UX Icons renders SVG icons with ``fill="currentColor"`` (see the `default configuration`_). +This means icons take their color from the CSS ``color`` property, which by default is inherited from the text color of +the parent element. + +.. code-block:: html+twig + + + {# icon color: blue #} + {{ ux_icon('bi:star') }} + + +You can set the icon's color using CSS classes, either on the parent container or directly on the icon: + +.. code-block:: html+twig + +
+ {# Inherit color from container (red) #} + {{ ux_icon('warning') }} + + {# Override parent with CSS class (blue) #} + {{ ux_icon('warning', { class: 'text-blue-500' }) }} +
+ +To configure a default class for all icons across your application see the `default configuration`_. Icon Sets ~~~~~~~~~ @@ -674,3 +696,4 @@ Learn more .. _`Tabler Icons`: https://github.com/tabler/tabler-icons .. _`Creating and Using Templates`: https://symfony.com/doc/current/templates.html .. _`How to manage CSS and JavaScript assets in Symfony applications`: https://symfony.com/doc/current/frontend.html +.. _`default configuration`: https://symfony.com/bundles/ux-icons/current/index.html#full-configuration