css 中的 Reactjs material 图标

Question

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

@material-ui/icons@4.9.1

我需要在我的 CSS 文件中将类之一的 'content' 值设置为向下箭头。我该怎么做？

Answer 1

Material UI 来自 @material-ui/icons@4.9.1 的图标被导出为 React 组件，因此您不能在 CSS.

中使用它们

但你的选择不多。

包括 material 图标字体并使用它。更多信息 here and here

勾选codepen

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

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

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

获取图标的svg。检查 material 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 文件，您可以使用数据 url 方法并将整个 svg 包含在您的 CSS 文件中。

css 中的 Reactjs material 图标

Reactjs material icons in css

css

reactjs

google-material-icons