默认图标

在线示例

Jmix 包含了超过 600 个内置的图标，分为三组：

Jmix

默认图标集。整合了所有的 Vaadin 图标，Vaadin 中没有的 Lumo 图标以及 Jmix 特定的图标。

Vaadin

Vaadin 框架提供的图标。

Lumo

Lumo 设计系统提供的图标。

通过属性设置图标

很多 UI 组件支持通过属性添加图标。某些组件还提供了多个这样的属性，可以将图标放在组件的不同位置，例如，icon、uploadIcon、downloadButtonIcon、dropLabelIcon。

示例：

<icon icon="USER"/>
<button text="Approve" icon="CHECK"/>
<fileUploadField uploadText="Upload file" uploadIcon="UPLOAD"/>

如需使用特定图标集的图标，需要添加图标集的前缀：

<icon icon="vaadin:user"/>
<button text="Approve" icon="lumo:checkmark"/>
<fileUploadField uploadText="Upload file" uploadIcon="vaadin:upload"/>

Studio 中也可以浏览和选择图标。在组件属性面板中，点击 icon 属性打开 Choose Icon 对话框。对话框中显示所有可用的图标集，并支持实时预览选择。

choose icon dialog

通过内部元素设置图标

一些组件支持通过内部元素添加组件，这些内部元素对应组件中不同的图标位置，例如 <icon>、<uploadIcon>、<dropdownIcon>、<prefix> 和 <suffix>。通过这种方式既可以使用内置的图标，也可以使用 自定义图标，包括 SVG、字体图标和图片。

示例：

<button text="Approve">
    <icon>
        <icon icon="CHECK"/>
    </icon>
</button>
<button text="Start">
    <icon>
        <svgIcon resource="/icons/jmix-icon.svg"/>
    </icon>
</button>
<button text="Download">
    <prefix>
        <fontIcon fontFamily="lumo-icons" charCode="ea17"/>
    </prefix>
</button>
<button text="Create">
    <icon>
        <image resource="/icons/icon.png" width="24px"/>
    </icon>
</button>

编程式设置图标

图标可以通过编程方式设置。建议使用 Icons bean 作为创建图标的核心接口。可以确保一致的行为（Icons 在解析 XML 时也会使用），并简化了中心化的 图标覆盖。

示例：

helperButton.setIcon(icons.get(JmixFontIcon.QUESTION_CIRCLE));

尽管如此，也可以绕过该 bean，直接从特定图标集中实例化图标：

helperButton.setIcon(VaadinIcon.QUESTION_CIRCLE.create());
editorButton.setIcon(LumoIcon.COG.create());