Icons not showing up in react template

chidimo

Hi,
I’m using onsen UI for a Meteor project with a React frontend. So far everything is working fine. But when I try to display icons as illustrated here https://onsen.io/playground/?framework=react&category=reference&module=icon, the icons don’t show up.

I have the following imports in my client/main.jsx file

import '../node_modules/onsenui/css/onsenui.css';
import '../node_modules/onsenui/css/onsen-css-components.css';
import '../node_modules/onsenui/js/onsenui.js';

I also get the following warnings in my dev console

Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/ionicons/css/ionicons.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/material-design-iconic-font/css/material-design-iconic-font.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/font_awesome/css/font-awesome.min.css".
Resource interpreted as Stylesheet but transferred with MIME type text/html: "http://localhost:3000/font_awesome/css/v4-shims.min.css".

I know this is a result of the following imports in the onsenui/css/onsenui.css file.

@import url("./ionicons/css/ionicons.min.css");
@import url("./material-design-iconic-font/css/material-design-iconic-font.min.css");
@import url("./font_awesome/css/font-awesome.min.css");
@import url("./font_awesome/css/v4-shims.min.css");

I need help on how to fix this so I can display icons.
Thanks

chidimo

I found the answer to my question. It’s right here

https://medium.com/the-web-tub/getting-started-with-meteor-and-onsen-ui-725eab52c69

Under Troubleshooting heading.