CSS中的Reactjs材质图标答案

【问题标题】：Reactjs material icons in cssCSS中的Reactjs材质图标
【发布时间】：2020-11-25 05:40:45
【问题描述】：

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

@material-ui/icons@4.9.1

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

【问题讨论】：

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

标签： css reactjs google-material-icons

【解决方案1】：

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

但你几乎没有选择。

包括材料图标字体并使用它。更多信息here 和 here

查看codepen

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

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

但我不喜欢导入整个字体文件只是为了有一个图标。所以这就是我以前的做法。

获取图标的 svg。从材料 ui 图标页面检查图标，获取 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 文件中。

【讨论】：