@h2qutc/angular-material-components 日期时间选择器和 SVG/第三方图标

Posted 2023-05-07

【中文标题】@h2qutc/angular-material-components 日期时间选择器和 SVG/第三方图标

【英文标题】：@h2qutc/angular-material-components datetime-picker and SVG/third-party icons

【发布时间】：2020-07-25 20:37:59

【问题描述】：

我从事的项目使用 Font Awesome SVG 图标和 Angular Material 图标as described here，到目前为止一切都很好。它需要一个日期时间选择器，并且由于 Angular Material does not provide the component yet 我选择了 @hgho（组件作者）在 this SO answer 中建议的 @angular-material-components/datetime-picker。

问题在于时间选择器uses Material font icons，与上述方法冲突。在没有加载网络字体的情况下，mat-icon 将连字显示为纯文本，我认为这是不可接受的：

我正在寻找一种解决方案：

以某种方式修复图标。 允许使用 Font Awesome 图标而不是“expand_more”/“expand_less”/“done”，以实现应用程序范围内的一致性。 最大限度地减少额外数据量。当然，我可以只为三个图标包含整个 Material Icons 字体，但这只是作为最后手段。

【参考方案1】：

我评估了几种方法：

查看mat-icon 或MatIconRegistry API 是否提供任何合适的选项，注册一个SVG 图标以用作字体图标连字的选项将是完美的。我找到了a relevant issue，但还没有解决。 fork 组件，修改模板。这绝对可行，但您现在必须支持 fork，并且依赖项更新会变得不那么顺利。 查看the component API 是否有自定义图标ng-template 的输入。答案是“否”，但是兄弟文件输入组件does support custom icon，所以也许类似的东西也会被添加到时间选择器中？这是an issue tracking this。 生成带有三个图标的自定义轻量级字体。 This issue 建议在这种情况下使用 Fontello，但 it does not support Material Icons yet，所以我改用 Icomoon。生成的 WOFF 为 1.8kb 非 gzip。

自定义字体解决方案（#4）详解：

转到Icomoon，从集合中选择图标或上传您自己的图标。 确保导出的字形连字与您的用例相匹配。 将字体加载到您的应用中，添加缺少的样式。样式与what's loaded from Google Fonts 相同，但在@font-face src: 中使用您的自定义字体文件。

// @angular-material-components/datetime-picker requires Angular Material icon ligatures font,
// but we use Font Awesome SVG icons.

// The custom font includes only three icons required for datetime-picker:
// 1. expand_more
// 2. expand_less
// 3. done
@font-face 
  font-family: 'custom-material';
  src: url('assets/fonts/custom-material.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: block;


ngx-mat-datetime-content 
  // The same style as from Material Icons from Google Fonts, which we don't import
  .material-icons 
    font-family: 'custom-material';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -webkit-font-feature-settings: 'liga';
    -webkit-font-smoothing: antialiased;
  
  .mat-icon 
    background-repeat: no-repeat;
    display: inline-block;
    fill: currentColor;
    height: 24px;
    width: 24px;
  

结果：

【讨论】：

这对我帮助很大！谢谢！

【参考方案2】：

另一种方法是使用以下方法导入图标：

npm install material-design-icons

然后在 style.css 中声明：

@import '~material-design-icons/iconfont/material-icons.css';

我无法包含 repo，因为将 angular-design-icons 添加到 stackblitz 的依赖项中存在问题。