如何解决CSS mask属性不请求图片的问题?

css属性mask,指定了一个照片的地址，但是从网络面板中发现并没有去请求获取这张照片，这是怎么回事？

<button>
      Icon <span data-icon="cloud"></span>
    </button>

[data-icon="cloud"] {
        --icon-cloud: url("https://api.iconify.design/mdi:apple-icloud.svg") center /
        contain no-repeat;
        mask: var(--icon-cloud);
        inline-size: 1rem;
        block-size: 1rem;
      }
      button {
        appearance: none;
        border: 0;
        padding-inline: 1.5ch;
        padding-block: 1ch;
        display: inline-flex;
      }

codesandbox