如何在mkdocs-material的所有链接中使用正确的颜色添加图标？

如何解决如何在mkdocs-material的所有链接中使用正确的颜色添加图标？

我正在尝试自动向Material for MkDocs中的链接添加图标。自动在链接中找到不同的扩展名并添加正确的图标。 tutorial

我想要的外观与在.md文件中添加图标的外观相同。例如相同大小的蓝色等 图标来自Materials package

第一次尝试 添加带有以下内容的extra.css文件：

.md-typeset a[href$='.docx'] {
    background: transparent url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 17H14l-2-7.5-2 7.5H8.5L6.1 7h1.7l1.54 7.5L11.3 7h1.4l1.97 7.5L16.2 7h1.7M19 3H5c-1.11 0-2 .89-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2z"></path></svg>')center right no-repeat;
    padding-right: 24px;
}

这可以正常工作，但是图标的颜色是黑色且无聊。

第二次尝试使用.css文件：

.md-typeset a[href$='.docx']::after {
    content: url('data:image/svg+xml;utf8,<svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M15.5 17H14l-2-7.5-2 7.5H8.5L6.1 7h1.7l1.54 7.5L11.3 7h1.4l1.97 7.5L16.2 7h1.7M19 3H5c-1.11 0-2 .89-2 2v14a2 2 0 002 2h14a2 2 0 002-2V5a2 2 0 00-2-2z"></path></svg>')
}

这导致一个巨大的黑色图标...

当我查看生成的.html文件时，我发现从.md文件生成的图标带有例如:material-file-word-Box:嵌套在<span<span class="twemoji">内。

有什么好主意吗？