## ThemeIcon  
Use ThemeIcon component to render icon inside element with theme colors.  
Category: Data Display  

### Usage

ThemeIcon can be customized by setting its variant, size, radius and color.


### Colors

ThemeIcon supports all colors from Mantine's theme colors.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

colors = [
    "gray",
    "red",
    "pink",
    "grape",
    "violet",
    "indigo",
    "blue",
    "lime",
    "yellow",
    "orange",
]

component = dmc.Stack(
    gap="xs",
    children=[
        dmc.Group(
            [
                dmc.ThemeIcon(
                    DashIconify(icon="tabler:photo", width=20),
                    variant=variant,
                    color=color,
                )
                for color in colors
            ],
            justify="center",
        )
        for variant in ["outline", "light", "filled"]
    ],
)
```
### Gradient Variant

To use gradient as ThemeIcon background:

* set `variant` prop to "gradient"
* set `gradient` prop to `{ "from": "color-from", "to": "color-to", "deg": 135}`, where

* `color-from` and `color-to` are colors from Mantine's theme colors.
* `deg` is linear gradient deg.

```python
import dash_mantine_components as dmc
from dash_iconify import DashIconify

component = dmc.Group(
    children=[
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "indigo", "to": "cyan"},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "teal", "to": "lime", "deg": 105},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "teal", "to": "blue", "deg": 60},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "orange", "to": "red"},
            size="lg",
        ),
        dmc.ThemeIcon(
            DashIconify(icon="tabler:photo", width=20),
            variant="gradient",
            gradient={"from": "grape", "to": "pink", "deg": 35},
            size="lg",
        ),
    ]
)
```
### Styles API


This component supports Styles API. With Styles API, you can customize styles of any inner element. See the Styling and Theming sections of these docs for more information.


| Name        | Static selector         | Description                                      |
|:------------|:------------------------|:-------------------------------------------------|
| root        | .mantine-ThemeIcon-root | Root element                                     |


### Keyword Arguments
#### ThemeIcon

- children (a list of or a singular dash component, string or number; optional):
    Icon displayed inside the component.

- id (string; optional):
    Unique ID to identify this component in Dash callbacks.

- aria-* (string; optional):
    Wild card aria attributes.

- attributes (boolean | number | string | dict | list; optional):
    Passes attributes to inner elements of a component.  See Styles
    API docs.

- autoContrast (boolean; optional):
    Determines whether button text color with filled variant should
    depend on `background-color`. If luminosity of the `color` prop is
    less than `theme.luminosityThreshold`, then `theme.white` will be
    used for text color, otherwise `theme.black`. Overrides
    `theme.autoContrast`.

- className (string; optional):
    Class added to the root element, if applicable.

- classNames (dict; optional):
    Adds custom CSS class names to inner elements of a component.  See
    Styles API docs.

- color (optional):
    Key of `theme.colors` or any valid CSS color. Default value is
    `theme.primaryColor`.

- darkHidden (boolean; optional):
    Determines whether component should be hidden in dark color scheme
    with `display: none`.

- data-* (string; optional):
    Wild card data attributes.

- gradient (dict; optional):
    Gradient data used when `variant="gradient"`, default value is
    `theme.defaultGradient`.

    `gradient` is a dict with keys:

- hiddenFrom (string; optional):
    Breakpoint above which the component is hidden with `display:
    none`.

- lightHidden (boolean; optional):
    Determines whether component should be hidden in light color
    scheme with `display: none`.

- loading_state (dict; optional):
    Object that holds the loading state object coming from
    dash-renderer. For use with dash<3.

    `loading_state` is a dict with keys:

- mod (string | dict | list of string | dicts; optional):
    Element modifiers transformed into `data-` attributes. For
    example: "xl" or {"data-size": "xl"}. Can also be a list of
    strings or dicts for multiple modifiers. Falsy values are removed.

- radius (number; optional):
    Key of `theme.radius` or any valid CSS value to set border-radius.
    Numbers are converted to rem. `theme.defaultRadius` by default.

- size (number; optional):
    Controls width and height of the button. Numbers are converted to
    rem. `'md'` by default.

- styles (boolean | number | string | dict | list; optional):
    Adds inline styles directly to inner elements of a component.  See
    Styles API docs.

- tabIndex (number; optional):
    tab-index.

- variant (string; optional):
    variant.

- visibleFrom (string; optional):
    Breakpoint below which the component is hidden with `display:
    none`.