Icon

Description #

<vaadin-icon> is a Web Component for displaying SVG icons.

Icon property #

The <vaadin-icon> component is designed to be used as a drop-in replacement for <iron-icon>. For example, you can use it with vaadin-icons like this:

<vaadin-icon icon="vaadin:angle-down"></vaadin-icon>

Alternatively, you can also pick one of the Lumo icons:

<vaadin-icon icon="lumo:user"></vaadin-icon>

Custom SVG icon #

Alternatively, instead of selecting an icon from an iconset by name, you can pass any custom svg literal using the svg property. In this case you can also define the size of the SVG viewBox using the size property:

import { html, svg } from 'lit';

// in your component
render() {
  const svgIcon = svg`<path d="M13 4v2l-5 5-5-5v-2l5 5z"></path>`;
  return html`
    <vaadin-icon
      .svg="${svgIcon}"
      size="16"
    ></vaadin-icon>
  `;
}

Properties #

char #

Type: string | null

A hexadecimal code point that specifies a glyph from an icon font.

Example: "e001"

fontFamily #

Type: string | null

The font family to use for the font icon.

icon #

Type: string | null

The name of the icon to use. The name should be of the form: iconset_name:icon_name. When using vaadin-icons it is possible to omit the first part and only use icon_name as a value.

Setting the icon property updates the svg and size based on the values provided by the corresponding vaadin-iconset element.

See also name property of vaadin-iconset.

iconClass #

Type: string | null

Class names defining an icon font and/or a specific glyph inside an icon font.

Example: "fa-solid fa-user"

ligature #

Type: string | null

A ligature name that specifies an icon from an icon font with support for ligatures.

Example: "home".

size #

Type: number

The size of an icon, used to set the viewBox attribute.

src #

Type: string | null

The SVG source to be loaded as the icon. It can be:

• an URL to a file containing the icon
• an URL in the format "/path/to/file.svg#objectID", where the "objectID" refers to an ID attribute contained inside the SVG referenced by the path. Note that the file needs to follow the same-origin policy.
• a string in the format "data:image/svg+xml,". You may need to use the "encodeURIComponent" function for the SVG content passed

svg #

Type: IconSvgLiteral | null

The SVG icon wrapped in a Lit template literal.

See also: IconSvgLiteral

symbol #

Type: string | null

The symbol identifier that references an ID of an element contained in the SVG element assigned to the src property

Types #

IconSvgLiteral #

export type IconSvgLiteral = SVGTemplateResult | typeof nothing;