Using Material icons inside a library component with Angular Nx Storybook

Question

i am having hard time in using Angular material icons in Nx storybook.

Here is how these are configured in angular.json, i think i am not configuring it correctly, please let me know what is the correct way to do it. Please note I cannot use link as following since, i am building a library, its not an application.

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

This is how icon is showing up.

Siddhartha Mukherjee · Accepted Answer · 2022-02-10T19:34:37.637

2

I did this way. you can try this

npm install material-design-icons

 // angular.json

   "styles": [
     "node_modules/material-design-icons/iconfont/material-icons.css"
   ]

// style.css
   @import '~material-design-icons/iconfont/material-icons.css';
 
// html  
<i class="material-icons">cloud_upload</i>

edited Feb 10 '22 at 19:34

answered Feb 10 '22 at 16:57

Siddhartha Mukherjee

2,703
2
24
29

i am already including this line and material-design-icons are already installed – ATHER Feb 10 '22 at 17:02
which angular version did you use – Siddhartha Mukherjee Feb 10 '22 at 17:09
its Angular 12.2.16 – ATHER Feb 10 '22 at 17:40
i added (@import '~material-design-icons/iconfont/material-icons.css';) it in style.css is working – Siddhartha Mukherjee Feb 10 '22 at 19:31
Yessssss... It worked, i was trying ~node_modules/material-design........ never knew that ~material-design works as well.... Thanks alot – ATHER Feb 10 '22 at 20:21

score 1 · Answer 2 · answered Mar 03 '22 at 05:27

1

Also i found the correct way to specify third party css for storybook ( i am using Angular). It should go under build-storybook --> options section in angular.json file.

answered Mar 03 '22 at 05:27

ATHER

3,254
5
40
63

Using Material icons inside a library component with Angular Nx Storybook

2 Answers2

Linked