mantra-sample-blog-app icon indicating copy to clipboard operation
mantra-sample-blog-app copied to clipboard

Published 20 hours ago • verified publisher icon mantrajs

How to add Google material icons to the project?

Open rnarayan opened this issue 8 years ago • 10 comments

I would like to add the following link in my html but I don't see a index.html file in the app. If I were to create one, where would I put that in the app?

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

rnarayan avatar Feb 25 '16 21:02 rnarayan

this is my main Styus file..

@import url(https://fonts.googleapis.com/css?family=Roboto:400,300,700,900);


h1
    font-family: 'Roboto', sans-serif
    font-weight: 700
    font-size 2rem

h2
    font-family: 'Roboto', sans-serif
    font-weight: 300
    font-size 1.4rem

h3
    font-family: 'Roboto', sans-serif
    font-weight: 400
    font-size 1.3rem

h4
    font-family: 'Roboto', sans-serif
    font-weight: 300
    font-size 1.1rem

payner35 avatar Feb 26 '16 06:02 payner35

Just create a style.css inside a component directory and import the stylesheet.

arunoda avatar Feb 26 '16 09:02 arunoda

The material icons couldn't be imported using @import in CSS. Apparently, font awesome icons have same issue. I ended up downloading material icons in public folder to make it work.

Is there a reason why mantrajs doesn't allow access to index.html? It would be nice to be able to use at least the

portion for quick prototyping. I know we can use kadira:dochead to manipulate but sometimes, it's just convenient to copy and paste links there.

rnarayan avatar Feb 27 '16 19:02 rnarayan

We won't stop you from adding a HTML file and setup CSS. That's totally fine.

arunoda avatar Feb 28 '16 08:02 arunoda

I am a little lost right now. Where would I put index.html in the mantra-sample-blog-app and ensure that the <head></head> section is served correctly. Thanks.

rnarayan avatar Feb 28 '16 16:02 rnarayan

Apparently, other people are having similar issues too. Here is an issue from mantra kickstarter app.

@arunoda , Let's reopen this issue. I think this is a serious consideration for a production app. Thanks.

rnarayan avatar Feb 28 '16 18:02 rnarayan

@rnarayan you can put your <head></head> in configs. Or if you want to use dochead, you can make a dochead.js and startup.js in the configs and initialize it in client/main

kokjinsam avatar Feb 28 '16 19:02 kokjinsam

@sammkj is correct. Create a startup.html file in configs and add your head into that. Meteor will load it correctly.

You can use DocHead too (and helmet) as mentioned on the kickstarter app repo in the similar fashion. If it's DocHead, it's a good idea to run them inside FlowRouter trigger to support server side rendering.

arunoda avatar Feb 28 '16 19:02 arunoda

@rnarayan I'll try to add an example case here: https://github.com/mantrajs/mantra-sample-blog-app/issues/76

arunoda avatar Feb 28 '16 19:02 arunoda

Thanks @sammkj and @arunoda. I will try your suggestion of startup.html in configs. I was planning on using DocHead but then the favicon issue worried me. I am using mantrajs to prototype a production app.

rnarayan avatar Feb 29 '16 04:02 rnarayan