material-ui 按钮中的字体真棒图标答案

【问题标题】：Font Awesome Icons in material-ui Buttonmaterial-ui 按钮中的字体真棒图标
【发布时间】：2018-12-12 14:58:36
【问题描述】：

我想在我的 material-ui Button 组件中使用 fontawesome 图标。但我不能那样做。你知道为什么吗？（我正在使用 React 和 react-admin 框架。）

import '../../../node_modules/font-awesome/css/font-awesome.min.css';
import Button from '@material-ui/core/Button';

....

<Button style={{
                    backgroundColor: '#5cb85c',
                    color: 'white'
                }}
                onClick={() => this.codeGenerate()}>
                <i className="fa fa-star"></i>
            </Button>

【问题讨论】：

你安装了 font awesome npm 模块吗？
是的，当然。使用“npm install --save font-awesome”命令。我的节点模块目录中有这个模块
错误是什么？
错误是图标没有出现在按钮上。仅显示文本

标签： reactjs font-awesome material-ui

【解决方案1】：

好吧，我不确定你是否阅读过 font-awesome 官方指南/文档，但他们建议使用“react-fontawesome”。

https://github.com/FortAwesome/react-fontawesome

很简单：

import ReactDOM from 'react-dom'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faCoffee } from '@fortawesome/free-solid-svg-icons'

const element = <FontAwesomeIcon icon={faCoffee} />

ReactDOM.render(element, document.body)

摘自我上面提供的链接。

我已经在我的 Material UI 项目中成功使用了它。如果您还有其他问题，请告诉我。

【讨论】：

图标未在我的按钮中呈现。你有任何线索可能是什么吗？ <button class="button is-danger">Reset</button>是<button className="button is-danger" > <FontAwesomeIcon icon="envelope" /> Reset </button>之后渲染的html
@KiranMathewMohan，如果您没有创建库，则不能直接使用“信封”。你？如果没有，请像我为 faCoffee 所做的那样导入信封图标，然后使用它。
我创建了一个库，在其他所有地方图标都可以使用
@KiranMathewMohan，除非你分享代码，否则很难说什么。
@Faheem 是的，但我做不到。我想知道您是否遇到过任何一般情况。

【解决方案2】：

您可以使用 Material-UI 中的 Icon 组件来使用图标

例如：

<Button
 style={{
 backgroundColor: "#5cb85c",
 color: "white"
 }}
 >
  <Icon className={classNames(classes.icon, "fa fa-plus-circle")} />
</Button>

这是一个工作示例：https://codesandbox.io/s/ly4n0z2oz9

你可以使用 font-awesome as

npm install --save font-awesome

import "font-awesome/css/font-awesome.css";

如本帖所述：https://github.com/facebook/create-react-app/issues/2872

【讨论】：

我尝试了链接中的第一个，但我收到类似“TypeError: Cannot read property 'icon' of undefined”这样的错误你能猜到原因吗？
你是如何导入图标的？你用过 loadCSS 吗？
是的，我使用了 loadCSS，但事实上，我不明白图标背后的逻辑，它是什么，为什么需要它或者我应该从哪里得到它
您是否使用 withStyles 传递了 classes 道具，并且您还需要安装 classNames 才能工作。请从工作示例中找到它。
我几乎按照示例中的方式进行了操作，但没有成功，因此我没有使用 font-awesome，而是使用了如下的 material-ui 图标。感谢您的帮助

【解决方案3】：

如果您只使用 Font Awesome 中的几个 SVG 图标，那么您不需要将整个 FA 库添加到您的项目中。

只需下载那个 SVG 图标并在谷歌浏览器中打开它，对点击它查看源代码。复制该图标的 SVG 路径并像这样将其粘贴到 SVG 图标按钮中：

<Tooltip title="GitHub ">
            <Button
              variant="fab"
              mini
              aria-label="GitHub"
              style={{ backgroundColor: "#4078c0", color: "#FFF" }}
              onClick={() =>
                window.open("https://github.com/hiteshsahu", "_blank")
              }
              className={classes.button}
            >
              <SvgIcon>
                <svg
                  aria-hidden="true"
                  data-prefix="fab"
                  data-icon="github-alt"
                  role="img"
                  xmlns="http://www.w3.org/2000/svg"
                  viewBox="0 0 480 512"
                >
                  <path
                    fill="currentColor"
                    d="M186.1 328.7c0 20.9-10.9 55.1-36.7 55.1s-36.7-34.2-36.7-55.1 10.9-55.1 36.7-55.1 36.7 34.2 36.7 55.1zM480 278.2c0 31.9-3.2 65.7-17.5 95-37.9 76.6-142.1 74.8-216.7 74.8-75.8 0-186.2 2.7-225.6-74.8-14.6-29-20.2-63.1-20.2-95 0-41.9 13.9-81.5 41.5-113.6-5.2-15.8-7.7-32.4-7.7-48.8 0-21.5 4.9-32.3 14.6-51.8 45.3 0 74.3 9 108.8 36 29-6.9 58.8-10 88.7-10 27 0 54.2 2.9 80.4 9.2 34-26.7 63-35.2 107.8-35.2 9.8 19.5 14.6 30.3 14.6 51.8 0 16.4-2.6 32.7-7.7 48.2 27.5 32.4 39 72.3 39 114.2zm-64.3 50.5c0-43.9-26.7-82.6-73.5-82.6-18.9 0-37 3.4-56 6-14.9 2.3-29.8 3.2-45.1 3.2-15.2 0-30.1-.9-45.1-3.2-18.7-2.6-37-6-56-6-46.8 0-73.5 38.7-73.5 82.6 0 87.8 80.4 101.3 150.4 101.3h48.2c70.3 0 150.6-13.4 150.6-101.3zm-82.6-55.1c-25.8 0-36.7 34.2-36.7 55.1s10.9 55.1 36.7 55.1 36.7-34.2 36.7-55.1-10.9-55.1-36.7-55.1z"
                  />
                </svg>{" "}
              </SvgIcon>
            </Button>
          </Tooltip>

它会完美运行

【讨论】：

【解决方案4】：

按照以下说明：https://fontawesome.com/how-to-use/on-the-web/using-with/react。

根据 Font Awesome 的说法，他们要求将 font-awesome-svg-core 和 free-solid-svg-icons 导入 App.js 文件。

但是在组件内使用图标时它似乎对我没有帮助。所以，这就是我用的。我将以下文件导入到我的组件中：

import { library } from '@fortawesome/fontawesome-svg-core'
import { faFileDownload } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(faFileDownload)

导入以上文件和代码后，可以通过这种方式为按钮添加图标，

<Button
color='primary'
variant="contained">

<FontAwesomeIcon icon="file-download"/>
button_text

</Button>

【讨论】：

在按钮内使用 FontawesomeIcon 是否有效？我不确定为什么它对我不起作用。
@PrivateOmega 是的，在 Button 中使用 FontawesomeIcon 对我有用。因为我想添加图标作为借口。

【解决方案5】：

字体真棒品牌图标...花了我时间弄清楚

import { library } from '@fortawesome/fontawesome-svg-core'
import { fab, faGooglePlay } from '@fortawesome/free-brand-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'

library.add(fab);

class FabTest extends Component{
      render(){
          return(
             <Button variant="contained" color="primary">
                  <FontAwesomeIcon icon={faGooglePlay}/>
                      <div>
                         <span> Get it on </span>
                          <p> PlayStore</p>
                      </div>
             </Button>
          )
      }
}

【讨论】：

【解决方案6】：

以下内容对我来说效果很好。

我根据 MUI 自述文件将 Font Awesome 中的 CSS 加载到我的根组件中：

    useEffect(() => {
      const node = loadCSS(
        'https://use.fontawesome.com/releases/v5.12.0/css/all.css',
        document.querySelector('#font-awesome-css') as HTMLElement,
      );

      return () => {
        node.parentNode?.removeChild(node);
      };
    }, []);

然后我在主题中添加了这些覆盖：

createTheme({
  overrides: {
    MuiIcon: {
      root: {
        width: 'auto',
        height: 'auto',
        fontSize: '1.25rem',
        padding: '.25rem',
      },
      fontSizeSmall: {
        fontSize: '1rem',
      },
      fontSizeLarge: {
        fontSize: '1.75rem',
      },
    },
    MuiButton: {
      iconSizeSmall: {
        '& > span:first-child': {
          fontSize: '1rem',
          marginBottom: '.1rem',
        },
      },
      iconSizeMedium: {
        '& > span:first-child': {
          fontSize: '1.1rem',
          marginBottom: '.1rem',
        },
      },
      iconSizeLarge: {
        '& > span:first-child': {
          fontSize: '1.2rem',
          marginBottom: '.1rem',
        },
      },
    },
    MuiIconButton: {
      root: {
        width: '2em',
        height: '2em',
      },
    },
  },
});

通过这些更改，我可以简单地将 FontAwesome 类添加到任何图标中，并且它会按应有的方式呈现：D

【讨论】：