Vuetify icon don't work with shadow-DOM

[SAntoineS]

Hi, I followed this tutorial to create Vuetify app.

It work well but I have a issue with icons. I've downloaded "@mdi/font": "^7.4.47", like the official docs and same files and same imports than your docs.

The problem is that I use this web component in a complex Vaadin project with a lot of CSS.

With the shadowDOM by default at false of createWebComponent and I can't see any icons (in combobox either).
But if I disable the shadoDOM with true all works fine. But in the Vaadin project it's impossible to have the component without shadowDOM.

Do you have any thought about it ?

Do you need some code ?

It could help
It could help too

Thanks,
Antoine

[EranGrin]

Hi there, I'll be back from holiday in 15 days, until then, my internet connection is quite low.
You can try to create a stackblitz demo that present the issue

[SAntoineS]

Hey @EranGrin !

I updated the issue, I figured out that was a shadowDOM problem.

Your default Vuetify demo on your docs have the issue.

[EranGrin]

@SAntoineS means this issue can be closed?
Can you point me to the issue you mentioned?

[SAntoineS]

@SAntoineS means this issue can be closed? Can you point me to the issue you mentioned?

No I still have the problem, I just discovered it was related to the ShadowDOM.

I meant this issue where we are now. (#34 (comment))

[EranGrin]

Apologize for the delayed response, but I only now found the time to tackle this.

The vuetify demo should contain the icons now

https://stackblitz.com/~/github.com/EranGrin/vuetify-web-component-wrapper?file=src/style.css
I just had to add the icon css to the main style css file

[EranGrin]

@SAntoineS let me know if I can close this issue

[SAntoineS]

@EranGrin

Thanks no problem for the delay I understand.

I had found this temporary solution by adding directly in the cssFrameworkStyles like :
cssFrameworkStyles: [style, materialIcons],

But I think it's a cleaner way to import icon css in style.css

Thanks !