Smart Icon

The Smart Icon element can be represented as a text icon, an icon from the Font Awesome set, a control icon, a spinner, or an image.

Properties

text: string

The text content of the icon.

name: string | Array<string> The name of the icon from the Font Awesome set. A large number of icons are available.

This takes precedence over the text parameter — its value will be ignored.

Examples of values: 'user' ['fas','shopping-cart'] ['system','android-back']

url: string The address of the icon image. This takes precedence over the text and name parameters — their values will be ignored.

size: number | Size Default: "md" The size of the icon. It can be any number or one from a specified set. Possible values: "sm", "md", "lg", "xl", "2xl", "3xl", number

class: string Default: "square" The shape of the icon: square or circle. Square by default. Possible values: "square", "circle"

badges: Array<T>

Additional status icons. Where T can be Badge or <smart-icon> as a status.

• Badge: { badge, position, style }

  badge: string

  • Status text.

  position: Position

  • The location of the status relative to the main icon. Four predefined locations or the option to specify a custom value as custom - in which case the positions are defined through the style properties left, right, top, and bottom.

  • This property can also be used for positioning the status icon <smart-icon>.

  • Possible values: top-left, top-right, bottom-left, bottom-right, custom

  style: Style

  • The style of the status.

style

Changing the appearance, location, and geometry of the block.

• padding, paddingHorizontal, paddingVertical, paddingTop, paddingRight, paddingBottom, paddingLeft
  Internal padding of the container. More details.

• margin, marginHorizontal, marginVertical, marginTop, marginRight, marginBottom, marginLeft
  External margins of the block. More details.

• position
  Positioning method of the block: relative or absolute. More details.

• top, right, bottom, left
  Offset from the original position. More details.

• border
  Setting borders for the block on all four sides: thickness, style, and color. More details.

• borderTop, borderRight, borderBottom, borderLeft
  Setting individual borders for the sides of the block: thickness and color. More details.

• borderRadius, borderBottomLeftRadius, borderBottomRightRadius, borderTopLeftRadius, borderTopRightRadius
  Rounding the corners of the borders. More details.

• borderWidth, borderTopWidth, borderRightWidth, borderBottomWidth, borderLeftWidth
  Thickness of the borders. More details.

• borderColor, borderTopColor, borderRightColor, borderBottomColor, borderLeftColor
  Color of the borders. More details.

• backgroundColor
  Background color of the block. More details.

• opacity
  Opacity of the entire block with its content. More details.

• elevation
  Height of the shadow. More details.

• shadowColor
  Shadow color of the block. More details.

• alignSelf
  Alignment of a specific block across the main axis of the container. More details.

• transform
  Transforming the geometry of blocks and containers in 2D and 3D space. More details.

Examples

---

Example icons from the Font Awesome set. Many more icons are available to choose from.

---

Available spinners

---

System control buttons

---

System control buttons

---

Round and square icons, and icons with text, badges, and images.

---

Color, background, and border options for the icon. The border uses the icon's color unless a custom one is specified.

---

Text status icons. The status may extend beyond the icon. In such cases, it is important that there is enough space in the container containing the icon; otherwise, the status will be cut off.

---

The size of the status adjusts according to the size of the icon.

---

Positioning the status.

---

Styling the text status. Note the difference in opacity between the two statuses. One status has only the background transparent, while the other is fully transparent, including the text.

---

<smart-icon> as a status.

---

All four types of statuses on one icon.

---