css中的Reactjs材质图标

Question

我安装了以下材质图标包：

@material-ui/icons@4.9.1

我需要在 CSS 文件中将其中一个类的“内容”值设置为向下箭头。我该怎么做呢？

Answer 1

Material UI 图标导出@material-ui/icons@4.9.1为 React 组件，因此您无法在 CSS 中使用它们。

但你的选择很少。

1. 包括材质图标字体并使用它。更多信息请点击这里和这里

检查代码笔

将字体包含在页面中后，您可以像这样在 CSS 中使用它

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

2. 但我不喜欢仅仅为了一个图标而导入整个字体文件。这就是我以前所做的。

获取图标的 svg。从 Material ui Icons 页面检查图标，获取 svg 代码并使用复制的 html 创建一个新的 svg 文件并将其放置在您的项目中。

获得 svg 文件后，在 CSS 中像这样使用它

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

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