如何在 Primefaces 组件中使用 Material Icons 图标答案

【问题标题】：How to use a Material Icons icon within a Primefaces component如何在 Primefaces 组件中使用 Material Icons 图标
【发布时间】：2021-06-30 16:18:13
【问题描述】：

如何在 Primefaces 组件中使用Material Icons，例如： <p:commandButton icon="material-icons-outlined face"/> 使用前缀为"ui-icon- 的图标属性定义。因为，在 Material Icons 网站上，只能这样使用：

<span class="material-icons-outlined">face</span>

Icon Face

Primefaces Sapphire Template 显示了一个转换选项，正在适应，我想知道如何做到这一点。

【问题讨论】：

标签： jsf primefaces material-design

【解决方案1】：

通过查看 Saphire 的源代码，您将需要使用像这样覆盖 ui-icon 等的 CSS。

来源：https://www.primefaces.org/sapphire/javax.faces.resource/theme.css.xhtml?ln=primefaces-sapphire-blue

声明字体：

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.eot.xhtml?ln=sapphire-layout");
    /* For IE6-8 */
    src: local("Material Icons"), local("MaterialIcons-Regular"), url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.woff2.xhtml?ln=sapphire-layout") format("woff2"), url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.woff.xhtml?ln=sapphire-layout") format("woff"), url("/sapphire/javax.faces.resource/fonts/MaterialIcons-Regular.ttf.xhtml?ln=sapphire-layout") format("truetype");
}

覆盖ui-icon

body .ui-icon {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 20px;
    display: inline-block;
    width: 20px;
    height: 20px;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    text-indent: 0;
    overflow: visible;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

body .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    /* Preferred icon size */
    display: inline-block;
    width: 1em;
    height: 1em;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* Support for all WebKit browsers. */
    -webkit-font-smoothing: antialiased;
    /* Support for Safari and Chrome. */
    text-rendering: optimizeLegibility;
    /* Support for Firefox. */
    -moz-osx-font-smoothing: grayscale;
    /* Support for IE. */
    font-feature-settings: 'liga';
}

然后在主题的底部，所有的ui图标都像这样被删除......

.ui-icon-circle-triangle-e:before { content: ""; }

【讨论】：