Стандартные иконки

Jmix включает более 600 стандартных иконок, организованных в три набора:

Jmix	Набор иконок по умолчанию. Объединяет все иконки Vaadin, иконки Lumo, отсутствующие в Vaadin, и иконки, специфичные для Jmix.
Vaadin	Иконки, предоставляемые фреймворком Vaadin.
Lumo	Иконки из дизайн-системы Lumo.

Jmix

Набор иконок по умолчанию. Объединяет все иконки Vaadin, иконки Lumo, отсутствующие в Vaadin, и иконки, специфичные для 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. В панели инспектора нажмите на атрибут иконки, чтобы открыть диалог Choose Icon. В диалоге отобразятся доступные наборы иконок.

Задание иконки через вложенный элемент

Некоторые компоненты поддерживают добавление иконок с помощью вложенных элементов, соответствующих определённым слотам иконок, таким как <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 бин как центральный интерфейс для создания компонентов UI, представляющих иконки. Это обеспечивает согласованное поведение (Icons также применяется при разборе XML) и упрощает централизованную замену иконок.

Например:

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

Либо, можно обойти разбор имён иконок через бин и создавать иконки напрямую из конкретного набора:

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