css中的材质图标

我已安装以下材料图标包：

@material-ui/icons@4.9.1

---

我需要将CSS文件中某个类的“content”值设置为向下箭头。如何执行此操作？

来自

@Material UI的材质UI图标/icons@4.9.1

作为React组件导出，因此不能在CSS中使用它们

但是你几乎没有选择

包括材质图标字体并使用该字体。更多信息和

检查

一旦在页面中包含了字体，就可以像这样在CSS中使用它

p::after, 
div::after {
  content: "face";
  color: blue;
}

.download:before {
  display: block;
  content: ' ';
  background-image: url('path-to-svg-folder/download.svg');
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
}

但是我不喜欢为了一个图标而导入整个字体文件。这就是我过去常做的事

获取图标的svg。检查“材质ui图标”页面中的图标，获取svg代码，使用复制的html创建新的svg文件，并将其放置在项目中

一旦有了svg文件，在CSS中就可以这样使用它

p::after, 
div::after {
  content: "face";
  color: blue;
}

.download:before {
  display: block;
  content: ' ';
  background-image: url('path-to-svg-folder/download.svg');
  background-size: 24px 24px;
  height: 24px;
  width: 24px;
}

---

注意：如果您不想拥有svg文件，可以使用数据url方法，并将整个svg包含在CSS文件中。

我认为您需要覆盖现有样式才能做到这一点。你试过使用吗！重要吗？