0

I was trying to use the Material Components for Web in my page(LINK).

Able to create a FAB using MDC and you can find them in here [CODE-PEN][2]

But when I try to do the same inside the Template and Custom Elements(Web Component), it doesn't seem to be working LINK

I get the proper CSS for the FAB but the icon is not displaying. Can anyone help me with this?

MDC LINK1: https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab

WORKING [2]: https://codepen.io/rleo2joseph/pen/GRRZGRv

NOT WORKING [3]: https://codepen.io/rleo2joseph/pen/KKKzeqY?editors=1010

Perseus
  • 1,546
  • 4
  • 30
  • 55

1 Answers1

0

It seems like your import order (of css) is incorrect... I've tried this:

<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

And it worked just fine... (maybe the material-components-web overrides some material icons definitions)

Anyhow - I do hope that you used your css links inside a component to demonstration purposes only and that your css deceleration in original code is placed at the head section of your page (or any other css bootstrapper in that matter)

UPDATE:

Please include Material Icons in your pen configurations (css section), like this:

enter image description here

Again, I do hope that in your project you defined the links (and their order) as I already noted in my original answer... including link element inside a component is truly not recommended (importing multiple components will result in multiple unnecessary imports)

ymz
  • 6,602
  • 1
  • 20
  • 39