transfer the Google Icon to canvas Failed

[BertramYe]

when I use the html2canvas to cteate the screenshoot with the google icons(https://fonts.google.com/icons), I found it only can help create the icon when the style of the [ font-variation-settings: 'FILL' 0] but when I create the sceenshoot with the style setting [ font-variation-settings: 'FILL' 1], it failed, so can u help resolve this issuse?
here are the code below:

// html
<span id="googleIcon" class="material-symbols-outlined" style="font-variation-settings: 'FILL' 1, 'wght' 700, 'GRAD' 0, 'opsz' 48;">favorite `

// js

    let node = document.getElementById('googleIcon');

    let showImage = document.getElementById('Image')

    createAndUpdateScrrenShootFromObjectLabel(node,showImage)

    async function createAndUpdateScrrenShootFromObjectLabel(element,image) {

        let PixelRatio = window.devicePixelRatio // 获取设备像素比
        try {
            if (element) {
                await html2canvas(element, {
                    windowWidth: element.scrollWidth,
                    windowHeight: element.scrollHeight,
                    scale: PixelRatio,
                    useCORS: true,
                }).then((canvas) => {
                    canvas.willReadFrequently = true;
                    image.src = canvas.toDataURL("image/png");
                })
            }
        } catch (error) {
            console.log('capture', error);
        }
    }