icon 图标

icon 展示图标集的一个图形。有两个内置的图标集：Vaadin 和 Lumo。

XML 元素

icon

Java 类

Icon

基本用法

在线示例

用 icon 在视图中的任意位置添加单独的图标。

XML
<layout>
    <hbox id="content" padding="false" alignItems="CENTER" wrap="true">
        <button icon="CHECK" themeNames="icon"/>
        <icon icon="vaadin:smiley"/>
        <textField id="field" placeholder="Field"/>
    </hbox>
</layout>
Java
@ViewComponent
protected TypedTextField<String> field;
@ViewComponent
protected HorizontalLayout content;

@Subscribe
protected void onInit(InitEvent event) {
    field.setSuffixComponent(VaadinIcon.QUESTION_CIRCLE.create());

    Icon icon = ComponentUtils.parseIcon("lumo:user");
    content.add(icon);
}

图标集

框架内置两套图标集：Vaadin 和 Lumo。通过图表名称的前缀区分，如果没添加前缀，则默认使用 Vaadin 图标集。

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

带图标的组件

图标可以是其他组件的一部分。参考在 button 组件中使用图标的示例。

XML 属性

下面是 icon 的特殊属性：

名称 描述 默认值

color

设置图标颜色。

—

icon

设置图标。

—

size

设置图标大小。

—

下面是 icon 支持的其他通用属性：

id - alignSelf - classNames - clickShortcut - colspan - css - visible

事件和处理器

下面是 icon 的特殊事件和处理器：

名称 描述

ClickEvent

The com.vaadin.flow.component.ClickEvent 当用户点击组件时发送。

下面是 icon 支持的其他通用事件：

AttachEvent - DetachEvent

XML 内部元素

一个 icon 可以包含 tooltip 作为其内部元素。

参考