# `Expresso.Element.Icon`
[🔗](https://github.com/rellen/expresso/blob/main/lib/expresso/element/icon.ex#L1)

An icon on its own, with a label under it

The first argument names a Lucide icon, such as `"rocket"`, or a name of the
`icons` option of the deck. `Expresso.IconTransformer` puts the SVG of the
icon into the `svg` field at compile time. The icon takes the color of a
role of the theme, and its size is a CSS length.

Without a label, the icon is a decoration, and a screen reader skips it.
With a label, the label is the caption of the icon, and a screen reader
reads the label.

# `t`

```elixir
@type t() :: %Expresso.Element.Icon{
  __spark_metadata__: term(),
  at: term(),
  class: term(),
  color: term(),
  easing: term(),
  effect: term(),
  el: term(),
  label: term(),
  morph: term(),
  name: term(),
  on: term(),
  signature: term(),
  size: term(),
  speed: term(),
  steps: term(),
  svg: term()
}
```

The struct of an icon

# `colors`

```elixir
@spec colors() :: [atom()]
```

Return the roles that the `color` option takes

    iex> Expresso.Element.Icon.colors()
    [:text, :muted, :accent, :success, :emphasis, :warning, :danger]

# `get_assigns`

```elixir
@spec get_assigns(t()) :: map()
```

Make the assigns of the render function from the struct

The key `overlay` holds the attributes of the overlay contract, from
`Expresso.Overlay.Render.attributes/1`. The key `svg` holds the SVG with
the ids and the style rules of this copy, from `Expresso.SvgCopy.copy/1`.

# `render`

```elixir
@spec render(map()) :: Phoenix.HTML.safe()
```

Make the HTML of an icon

The icon is a `figure` with the SVG and, with a label, a `figcaption`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*