The “@wordpress/components” dashicon doesn’t appear on block’s preview

[Sergey98Am]

On the “Quiz” custom block I use the “@wordpress/components” Icon component, but the icon does not appear on the block’s preview.

import "./index.scss"
import {TextControl, Flex, FlexBlock, FlexItem, Button, Icon, PanelBody, PanelRow, ColorPicker} from "@wordpress/components"
import {InspectorControls, BlockControls, AlignmentToolbar} from "@wordpress/block-editor"

(function() {
    let locked = false;

    wp.data.subscribe(() => {
        const results = wp.data.select("core/block-editor").getBlocks().filter((block) => {
            return block.name === "ourplugin/are-you-paying-attention" && block.attributes.correctAnswer === undefined
        });

        if (results.length && locked === false) {
            locked = true;
            wp.data.dispatch("core/editor").lockPostSaving("noanswer")
        }

        if (!results.length && locked) {
            locked = false;
            wp.data.dispatch("core/editor").unlockPostSaving("noanswer")
        }
    })
})()

wp.blocks.registerBlockType("ourplugin/are-you-paying-attention", {
    title: "Are you paying attention?",
    icon: "smiley",
    category: "common",
    attributes: {
        question: {type: "string"},
        answers: {type: "array", default: [""]},
        correctAnswer: {type: "number", default: undefined},
        bgColor: {type: "string", default: "#EBEBEB"},
        theAlignment: {type: "string", default: "left"},
    },
    example: {
      attributes: {
          question: "What is my name?",
          correctAnswer: 3,
          answers: ["Meowsalot", "Barksalot", "Purrsloud", "Brad"],
          theAlignment: "center",
          bgColor: "#CFE8F1"
      }
    },
    edit: EditComponent,
    save: (props) => {
        return null
    },
});

function EditComponent(props) {
    function updateQuestion(value) {
        props.setAttributes({question: value})
    }

    function deleteAnswer(indexToDelete) {
        const newAnswers = props.attributes.answers.filter((x, index) => {
            return index !== indexToDelete
        })
        props.setAttributes({answers: newAnswers})

        if (indexToDelete === props.attributes.correctAnswer) {
            props.setAttributes({correctAnswer: undefined})
        }
    }
    
    function markAsCorrect(index) {
        props.setAttributes({correctAnswer: index})
    }

    return (
        <div className="paying-attention-edit-block" style={{backgroundColor: props.attributes.bgColor}}>
            <BlockControls>
                <AlignmentToolbar value={props.attributes.theAlignment} onChange={x => props.setAttributes({theAlignment: x})} />
            </BlockControls>
            <InspectorControls>
                <PanelBody title="Background Color" initialOpen={true}>
                    <PanelRow>
                        <ColorPicker color={props.attributes.bgColor} onChangeComplete={x => {
                            props.setAttributes({bgColor: x.hex})
                        }} />
                    </PanelRow>
                </PanelBody>
            </InspectorControls>
            <TextControl label="Question:" value={props.attributes.question} onChange={updateQuestion} style={{fontSize: "20px"}} />
            <p style={{fontSize: "13px", margin: "20px 0 8px 0"}}>Answers:</p>
            {props.attributes.answers.map((answer, index) => (
                <Flex>
                    <FlexBlock>
                        <TextControl value={answer} onChange={newValue => {
                            const newAnswers = props.attributes.answers.concat([])
                            newAnswers[index] = newValue
                            props.setAttributes({answers: newAnswers})
                        }} style={{fontSize: "20px"}} />
                    </FlexBlock>
                    <FlexItem>
                        <Button onClick={() => markAsCorrect(index)}>
                            <Icon className="mark-as-correct" icon={props.attributes.correctAnswer === index ? "star-filled" : "star-empty"} />
                        </Button>
                    </FlexItem>
                    <FlexItem>
                        <Button isLink className="attention-delete" onClick={() => deleteAnswer(index)}>Delete</Button>
                    </FlexItem>
                </Flex>
            ))}
            <Button isPrimary onClick={() => {
                props.setAttributes({answers: props.attributes.answers.concat([""])})
            }}>Add another answer</Button>
        </div>
    )
}

[Mamaduka]

Probably related #53528.

[colorful-tones]

@Sergey98Am can you try adding this and seeing if it is still an issue?

add_action('enqueue_block_assets', function (): void {
    wp_enqueue_style('dashicons');
});

Note: I grabbed this from
#53528 (comment)

[Mamaduka]

I've confirmed this is a duplicate of #53528. The issue occurs with iframed editors, which block preview is using.

[Sergey98Am]

Thanks @Mamaduka and @colorful-tones