React-styleguidist: How to use Material Icons in documentation?

Created on 23 Nov 2017 · 4Comments · Source: styleguidist/react-styleguidist

Is there any way to render Material Icons that I have been using through CDN like this?

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

It displays the icon name rather than the actual icon.

Thanks!

question

Source

Harshit369

👍2

Most helpful comment

@Harshit369 you can add a styleguide.config.js
and within it:

export {
   template: './template.html'
}

In template.html add <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> within the head tag.

sidharthmehra on 5 Dec 2017

👍2

All 4 comments

Please make a demo project that we can debug based on this repo: https://github.com/styleguidist/example

sapegin on 24 Nov 2017

@Harshit369 you can add a styleguide.config.js
and within it:

export {
   template: './template.html'
}

In template.html add <link rel="stylesheet" href="//fonts.googleapis.com/icon?family=Material+Icons"> within the head tag.

sidharthmehra on 5 Dec 2017

👍2

@sidharthmehra Thanks a lot !! It worked very well.
Just for anybody following this thread, you also have to add:
<div id="app"></div>
inside your <body> In your template.html file. Otherwise, it will throw something like this:
Target container is not a DOM element.