How to import material icons files in an angular library

Question

I am creating an angular library following this article

TL;DR Using the following commands

ng new foo --create-application=false // for workspace
cd foo
ng generate library foo-lib // for library

I want to use Material Icons in my component template and have done so by following this repo that I found in this Github issue

npm install @material-design-icons/font@latest

foo-lib.component.html

<span class="material-icons-outlined icon">fit_screen</span>

foo-lib.component.scss

$material-design-icons-font-path: '~@material-design-icons/font/';
@import '@material-design-icons/font';

tsconfig.lib.json

{
    ....,
    "styles": [
        "node_modules/@material-design-icons/font/",
        "node_modules/@material-design-icons/font/outlined.scss",
        "node_modules/@material-design-icons/font/material-icons-outlined.woff2"
    ],
 }

Found this question on SO but it did not work either.

No. I am trying to create the library to be used in other projects as it is, hence it would be an additional step to ask the users to manually import the styles while using the library. Can the styles files not be imported within the library itself? — breach, Apr 24 '23 at 12:16

breach · Accepted Answer · 2023-04-26T18:58:03.840

Since there seems to be no way to actually import the style files from the material-icons (or similar) library in the node modules, I have adopted a different approach.

Copying the files from the node_modules into an assets folder within my library

projects
|_ foo-lib-test
|_ foo-lib
   |_ assets   <--------- New folder
   |  |_ material-icons
   |     |_ _core.scss
   |     |_ filled.scss
   |     |_ index.scss
   |     |_ material-icons-outlined.woff2
   |     |_ material-icons.woff2
   |     |_ outlined.scss
   |
   |_ node_modules
   |_ src
   |  |_ lib
   |     |_ foo-lib.component.html
   |     |_ foo-lib.component.ts
   |     |_ foo-lib.component.scss
   |     |_ foo-lib.module.ts
   |
   |_ ng-package.json
   |_ package.json
   |_ tsconfig.lib.json

Note: I have only used the regular (filled) and outlined icons, hence avoided the rest. _core.scss and index.scss are mandatory. Ensure to include both, the .scss as well as the .woff2 files for whatever style you want.

Letting the packager know to export this folder during build, hence making it available in the consequent dist folder.

ng-package.json

"assets": [
    "assets/**/*.*"
]

Setting the path of the .woff2 files in the variable that will be used by index.scss to import and use them. And finally importing index.scss itself.

foo-lib.component.scss

$material-design-icons-font-path: '../../assets/material-icons/';
@import '../../assets/material-icons/index.scss';

If you still face issues, try changing the encapsulation for the root component as such

foo-lib.component.ts

@Component({
    selector: 'foo-lib',
    templateUrl: './foo-lib.component.html',
    styleUrls: ['./foo-lib.component.scss'],
    encapsulation: ViewEncapsulation.None
})

This will alter the scope of the root components style file to be global

The usage remains the same

foo-lib.component.html

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

How to import material icons files in an angular library

1 Answers1