What is the correct way to include Vuetify's material-icons styles inside a web component, so that it is accessible in the shadow without any external links in parent (since web components do not have an index.html)?
I am targeting a wc like this:
vue-cli-service build --target wc --name my-element 'src/components/mycomponent.vue'
so, all css libraries/icons need to exist inside mycomponent.vue .
I've tried adding a link to the material icons inside the component's template
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons">
I've also tried using the various instructions on this page
yet, nothing seems to work when the web component is included in an external page. All you see is the letters of the icon name, not the icon.
// main.js
import 'material-design-icons-iconfont/dist/material-design-icons.css' // Ensure you are using css-loader
import Vue from 'vue'
import Vuetify from 'vuetify'
Vue.use(Vuetify, {
iconfont: 'md'
})
this does NOT work because the web component does not contain the Vue instance. (that is in the parent vue app). And I am just exporting one .vue component.
I expect the icons to work inside a web component without any external dependencies in the parent.
Finally got it to work by simply adding a link tag to the cdn inside the template tag of my mycomponent.vue file.
This is the only way I was able to get it to work in a child to another wc. So my vue built wc is running as a child to a React built wc! Framework Agnostic!