color-picker dashicon not showing

[Lwangaman]

When creating a PanelBody in the InspectorControls for Gutenberg block, and using 'color-picker' from Dashicons, no icon is rendered. Other dashicons are working, but 'color-picker' is not.

Sample code:

createElement(PanelBody, { title: __('Border color','textdomain'), initialOpen: false, icon: 'color-picker' },
        createElement(ColorPicker, {
                color: attributes.PARAGRAPHSTYLES_BORDERCOLOR,
                disableAlpha: false,
                onChangeComplete: changeParagraphStyleBorderColor
        })
)

[Lwangaman]

Here is the link to the corresponding dashicon: ​https://developer.wordpress.org/resource/dashicons/#color-picker .

[Lwangaman]

Using the 'color-picker' icon in an html element using css classes works fine:

<h2 class="dashicons-before dashicons-color-picker">A Colorful Headline</h2>
<h2><span class="dashicons dashicons-color-picker"></span> A Colorful Headline</h2>

It is only when using the string 'color-picker' to indicate the icon when creating a Gutenberg PanelBody that the icon is not shown:

createElement(PanelBody, { title: __('Background color','textdomain'), initialOpen: false, icon: 'color-picker' }

Icon not shown. Other icons work fine:

createElement(PanelBody, { title: __('Layout options','textdomain'), initialOpen: false, icon: 'admin-appearance' }

[chaion07]

Hello @Lwangaman,

Thank you for putting together this information. This ticket was discussed in a Core Triage session and it seems as if the issue is related to the Block Editor. Since this issue is best reported using the [Gutenberg repository]​https://github.com/WordPress/gutenberg, we suggest you refer to this issue: ​https://github.com/WordPress/gutenberg/issues/20284#issuecomment-664722165 that talks about color picker icon. Hope this helps. Thank you!

[sabernhardt]

This could have been closed earlier. If you still experience the problem, you could open a new issue on the ​Gutenberg repository.