A Surface component for rendering icons using various methods.

specifying-what-icon-to-use

Specifying what icon to use

• iconify or icon: Any icon from Iconify (https://icones.js.org)
• solid: Shorthand for Heroicons solid icons
• outline: Shorthand for Heroicons outline icons

extra-properties

Extra Properties

• svg: Optionally pass SVG markup directly
• mode: Sets what rendering mode to use (see Iconify docs)
• class: Any CSS classes to apply to the icon

examples

Examples

iex> alias Iconify.Icon
iex> ~F"<#Icon iconify="heroicons-solid:user" class="w-6 h-6" />"
# Returns rendered icon HTML

iex> ~F"<#Icon solid="user" class="w-6 h-6" />"

iex> ~F"<#Icon svg="<svg>...</svg>" class="w-6 h-6" />"

properties

Properties

• iconify :string, required: false, static: true
• icon :string, required: false, static: true
• solid :string, required: false, static: true
• outline :string, required: false, static: true
• svg :string, default: nil, required: false, static: true
• mode :atom, required: false, static: true
• class :css_class, default: nil