@h2qutc/angular-material-components datetime-picker and SVG/third-party icons

Question

The project I work on uses Font Awesome SVG icons and Angular Material icons as described here, so far so good. It requires a datetime picker, and since Angular Material does not provide the component yet I opted for @angular-material-components/datetime-picker suggested in this SO answer by @hgho (the component author).

The problem is that the time picker uses Material font icons, which conflicts with approach described above. Without web font loaded, mat-icon displays ligatures as plain text, which I consider inacceptable:

I am looking for a solution that:

Fixes the icons in some manner.
Allows to use Font Awesome icons instead of "expand_more" / "expand_less" / "done" for application-wide consistency.
Minimizes the amount of extra data. Sure, I can include the whole Material Icons font for only three icons, but only as a measure of last resort.

Klaster_1 Нет войне · Accepted Answer · 2020-04-15T08:32:01.040

I've evaluated several approaches:

See if mat-icon or MatIconRegistry APIs provide anything suitable, an option to register an SVG icon to use as font icon ligature would have been perfect. I found a relevant issue, but it has not been resolved yet.
Fork the component, modify the template. This should absolutely work, but you'd have to support the fork now and dependency updates would become less smooth.
See if the component API has inputs for custom icon ng-template. The answer is "no", but the sibling file input component does support custom icon, so maybe something similar will be added to the time picker too? Here's an issue tracking this.
Generate custom lightweight font with three icons. This issue suggests to use Fontello for such cases, but it does not support Material Icons yet, so I used Icomoon instead. The resulting WOFF is 1.8kb non-gzipped.

The custom font solution (#4) in detail:

Go to Icomoon, choose icons from the set or upload your own.
Ensure exported glyph ligatures match your use case.
Load the font into your app, add missing styles. The styles are the same as what's loaded from Google Fonts, but with your custom font file in @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;
  }
}

The result:

that helped me a lot! Thank you! – Ícaro Erasmo Nov 25 '21 at 18:58 — Ícaro Erasmo, Nov 25 '21 at 18:58

score 2 · Answer 2 · edited Oct 15 '20 at 15:15

2

Another way is to import icons using:

npm install material-design-icons

and then declare this in style.css by:

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

I couldn't include repo because there is a problem to add angular-design-icons to dependencies on stackblitz.

edited Oct 15 '20 at 15:15

Dharman

30,962
25
85
135

answered Sep 01 '20 at 11:40

Robert Głowacki

292
5
22

Aryan Aman · Answer 3 · 2022-09-23T06:01:55.207

-1

Simple Answer for that , Please add the below link to index.html, No need to install anything

   <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">

edited Sep 23 '22 at 06:01

answered Sep 23 '22 at 06:00

Aryan Aman

1
2

The question explicitly mentions that using the complete Material Icons font is not an option. – Klaster_1 Нет войне Sep 23 '22 at 07:53
As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Sep 27 '22 at 13:22

@h2qutc/angular-material-components datetime-picker and SVG/third-party icons

3 Answers3