[Missing Documentation] How to use ionicons in a Stencil standalone component with Stencil One

Stencil version:

└── @stencil/[email protected] 

I'm submitting a:

[x] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://stencil-worldwide.herokuapp.com/ or https://forum.ionicframework.com/

Current behavior: I get an HTTP 404 Error when using ion-icon inside my stencil component.

GET http://localhost:3333/build/svg/md-heart.svg 404 (Not Found)

Expected behavior: The icon should load without a problem.

Steps to reproduce:

1. Install ionicons into your stencil component project by using npm i -S ionicons
   => my current version from 21st June 2019 is ^4.5.8

2. Import ionicons into your component tsx file like this: import 'ionicons';
   Note: I read this thread: https://github.com/ionic-team/stencil/issues/475
   The suggestion from Dellos7 seems to be able to load the component. However, it does not find the icons svg)

3. Use the ion-icon tag in your render method: <ion-icon name="heart"></ion-icon>

Related code:

import {Component, h, Prop} from '@stencil/core';
import 'ionicons';

@Component({
  tag: 'byc-region',
  styleUrl: 'byc-region.scss',
  shadow: true
})
export class BycRegion {
  render() {
    return (<section class="byc-region">
      <section class="header">
        <ion-icon name="heart"></ion-icon>
        <some-more-content></some-more-content>
    </section>);
  }
}

Other information:

Maybe the compilation of ionicons is incomplete when imported into stencil components?

@bjesuiter Please try to add import to src/index.ts:

export { Components } from './components';
import '@stencil/router';
import 'ionicons';

Ok, for some reason it does work now when adding import 'ionicons'; to my byc-region.tsx component file without having the script tag in index.html for the ionicons.js import from unpkg. (this one: <!-- <script src="https://unpkg.com/[email protected]/dist/ionicons.js"></script>-->)'

Note, that I did not have to add it to index.ts.

To avoid my test being flawed by the browser cache, instructed ion-icon to load the md-aperture and md-airplane icons which I did not load at all before.

I also did compile it and imported it as Webcomponent into another project and it works.

A little question for understanding: Would the dependency to ionicons get distributed along with my component, when imported in my src/index.ts, as the import in my own component does ?

@donskov Thanks for your help anyway! :)

But anyway, this import 'some-other stencil-package'; Syntax should be described in the documentation. Could you guys add a page with a name something like 'Using other Webcomponents for your stencil component' under the Components Part of the Documentation Website? https://stenciljs.com/docs/decorators

I've tried all the above mentioned solutions using stencil and ionic to create a component and then exporting my component into a create-react-app and the icons will not show. I used a fresh stencil starter project and a fresh create-react-app project.

The script tag to add into the index.html is fickle (sometimes it works, and other times it doesn't.)

From my understanding, I shouldn't even need the script tag since ion icons should come included with ionic. Can someone please advise?

Is there any update on this issue? I am also facing the same issue. In development bundle the icon shows up, but not in the production bundle.

@avrghz I know it's late, but better than nothing...

How do you serve your production bundle? In my case, I was using VSCode's Live Server extension, which for some reason injects script tag with svg tag. And ion-icon doesn't accept that as the docs says. https://ionicons.com/usage#custom_icons

Noted that we should improve the documentation around where to import other stencil built web components - importing them from within the src/index.ts is the correct way to do this.

import 'ionicons';

I've created a new stencil component and tried the following the steps:

1. Install ionicons: npm i ionicons:

   "@ionic/core": "^6.0.4",
   "@stencil/core": "^2.13.0",
   "ionicons": "^6.0.1",
   

2. Add import 'ionicons'; in src/index.ts:

   import 'ionicons';
   import '@ionic/core';
   
   export { Components, JSX } from './components';
   

3. Use ion-icon in my-component:

   render() {
       return (
           <ion-buttons>
               <ion-button>
                   <ion-icon slot="icon-only" name="remove-outline" />
               </ion-button>
           </ion-buttons>
       );
   

4. Build the component npm run build

5. npm link the component into another project with only an index.html webpage:

   <!DOCTYPE html>
   <html>
   <head>
       <script type="module" src="/node_modules/my-component/dist/my-component/my-component.esm.js"></script>
   </head>
   <body>
       <my-component />
   </body>
   </html>
   

6. live-serve the whole folder

7. Access to index.html. The html seems to be rendered, but the icon itself is missing (no icon shown inside ion-icon):

   

   Empty icons:

   

EDIT This is quite strange, the published npm version at pdf-component works fine, but I was affraid to publish something that was not working at all. I've tried the local files of published version in via linked node_modules and it still does not work.

Same thing happened here, I added import 'ionicons'; in src/index.ts, but ion-icon doesn't render an icon, just a div