If you need to import font icons to your app, the best way is to include it as a <link> tag in the head of your document. For example if you're using Material Icons you would add this to your <head>:
<link href="https://fonts.googleapis.com/icon?family=Material+Icons"
rel="stylesheet">Further details documented on Material Icons docs .
By not including the font icon inside your CSS file, it reduces the file size. By reducing CSS file size, you decrease the time to initial load since CSS files are render blocking. This does present some drawbacks -- the main issue being FOUC (Flash of unstyled content). Your users will not see the actual icons until the font icon file loads.
If you load your font icons with a Ripple with the above method, you will need to set the height and width of the icons. This is because MDC Ripple calculates the ripple size from the initial height/width.
References:
- https://stackoverflow.com/questions/29596714/new-es6-syntax-for-importing-commonjs-amd-modules-i-e-import-foo-require
- https://github.com/basarat/typescript-book/blob/master/docs/project/external-modules.md
- microsoft/TypeScript#2242 (comment)
- microsoft/TypeScript#2242 (comment)
Since classnames@2.2.6 is exporting default, we should be importing as such:
// referenced in https://github.com/basarat/typescript-book/blob/master/docs/project/external-modules.md#default-exportsimports
import classnames from 'classnames';