如何将Material Design图标用作CSS背景图像值？

Question

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

Answer 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影响）等。）

Answer 2

如果您使用“材质图标字体”，则可以使用的另一种技术是使用:before和:after伪选择器+ html entities。

CSS (codepen example)

.someclass:before { 
    content: "\E3E7"; 
    font-family: "Material Icons"; 
}

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