Add support for custom icons

[m-orlova]

Currently, it is not possible to set a custom icon (e.g., com.vaadin.flow.component.icon.SvgIcon) for a custom implementation of io.jmix.flowui.kit.action.Action. Therefore, it is not possible to use an action with a custom icon in the dropdown buttons with <actionItem> and in case of simple button it is required to set an icon each time manually.

[glebfox]

Relates to: https://github.com/jmix-framework/jmix/issues/4604

[glebfox]

Solution

Components that support the icon attribute now have the nested <icon> element that allows to define one of the following icon components:

• <icon>
• <svgIcon>
• <fontIcon>
• <image> (without data binding)

For example:

<actions>
    <action id="iconAttributeAction" text="Action (icon attribute)" icon="CHECK"/>

    <action id="iconAction" text="Action (icon)">
        <icon>
            <icon icon="CHECK"/>
        </icon>
    </action>
    <action id="svgIconAction" text="Action (svg)">
        <icon>
            <svgIcon resource="/icons/check-solid-full.svg"/>
        </icon>
    </action>
    <action id="fontIconAction" text="Action (font)">
        <icon>
            <fontIcon fontFamily="lumo-icons" charCode=""/>
        </icon>
    </action>
    <action id="imageAction" text="Action (image)">
        <icon>
            <image resource="/icons/icon.png" width="24px"/>
        </icon>
    </action>
</actions>

<layout>
    <button id="iconAttributeButton" text="Button (icon attribute)" icon="CHECK"/>

    <button id="iconButton" text="Button (icon)">
        <icon>
            <icon icon="CHECK"/>
        </icon>
    </button>
    <button id="svgIconButton" text="Button (svg)">
        <icon>
            <svgIcon resource="/icons/check-solid-full.svg"/>
        </icon>
    </button>
    <button id="fontIconButton" text="Button (font)">
        <icon>
            <fontIcon fontFamily="lumo-icons" charCode=""/>
        </icon>
    </button>
    <button id="imageButton" text="Button (image)">
        <icon>
            <image resource="/icons/icon.png" width="24px"/>
        </icon>
    </button>
</layout>

List of components:

• action
• button
• dropdownButton
• comboButton - supports both <icon> and <dropdownIcon>
• drawerToggle
• fileUploadField - <uploadIcon>
• fileStorageUploadField - <uploadIcon>
• upload - <uploadIcon> and <dropLabelIcon>
• notificationsIndicator
• webdavDocumentUpload - <uploadIcon>, <downloadButtonIcon> and <clearButtonIcon>
• menu.xml - <menu> and <item> suport <icon>

Also, components and actions that have API accepting the Icon component now have these methods deprecated and provide new ones that work with Component, e.g.:

io.jmix.flowui.kit.action.Action#setIcon(Icon) -> io.jmix.flowui.kit.action.Action#setIconComponent(Component)

[glebfox]

For QA: wait for https://github.com/jmix-framework/jmix/issues/4910