如何使用 Material Design Icon 作为 CSS background-image 值？答案

【问题标题】：How can I use a Material Design Icon as a CSS background-image value?如何使用 Material Design Icon 作为 CSS background-image 值？
【发布时间】：2016-10-21 18:01:26
【问题描述】：

我正在使用 materializecss，所以我已经有了可用的材料设计图标。如何在我的 CSS 代码（实际上是 SASS）中将它们用作 background-image 值？

【问题讨论】：

看起来文档显示 SVG 是可用的，所以你可以做类似 background-image: url('data:image/svg+xml;utf-8,<svg ...>[put SVG code here]</svg> 的事情。
谢谢，它就像一个魅力。我试图导入字体，但它似乎不是正确的 css 图像值。将此作为答案发布，我将关闭该问题。

标签： css material-design materialize

【解决方案1】：

您可以使用 Material Design Icons 的 SVG 代码来设置背景图像，例如：

.selector {
  background-image: url('data:image/svg+xml;utf-8,<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 24 24"><path fill="%232196F3" d="M 5,3L 19,3L 20.7359,6L 20.7304,6C 20.9018,6.29149 21,6.63428 21,7L 21,19C 21,20.1046 20.1046,21 19,21L 5,21C 3.89543,21 3,20.1046 3,19L 3,7C 3,6.638 3.09618,6.29846 3.26437,6L 3.26135,6L 5,3 Z M 5.57294,4L 5,5L 5,5L 19,5L 18.4303,4L 5.57294,4 Z M 7,12L 12,17L 17,12L 14,12L 14,10L 10,10L 10,12L 7,12 Z "></path></svg>');
}

A fiddle

我在制作小提琴时注意到/想起的怪癖：

没有 xmlns 属性似乎无法工作
填充或其他地方的# 需要用%23 转义（或改用rgb(a) 值）
您可能需要根据需要调整宽度和高度以及 viewBox 属性（是否填充区域、是否重复（您也可以通过background-repeat 影响）等）

【讨论】：

无效的属性值

【解决方案2】：

如果您使用 Material Icons Font，您可以使用的另一种技术是使用 :before 和 :after 伪选择器 + html entities。

CSS (codepen example)

    /* imports the font */
    @import url("https://fonts.googleapis.com/icon?family=Material+Icons");

    /* adds icon in front of the element */
    .someclass:before { 
        /* https://github.com/google/material-design-icons/blob/master/iconfont/codepoints */
        content: "\E3E7"; 
        font-family: "Material Icons"; 
    }

（这里是icon codes的链接）

它不完全是 background-image，但仍然很有用。

【讨论】：

只是为了添加更多信息......实际上，只是这个块是必要的：.someclass:before { content: "\E3E7"; font-family: "Material Icons";}。声明 content: "\E3E7"; 设置要使用的图标的代码点。例如，您可以使用代码\E312 作为content 属性的值来获取键盘图标。可用的材料设计图标代码点：github.com/google/material-design-icons/blob/master/iconfont/…