0

Currently working on a group project for class. It's using React and MaterializeCss on the front.

I'm trying to add icons, for example, on the login screen I have a little person icon next to the username input field, but it just displays "ACCOUNT_USER" or on the send button, I want to show an icon called send but it just displays "SEND". Here's a code example.

          <div className="row">
            <div className="input-field col s6 offset-m3">
              <i className="material-icons prefix">account_circle</i>
              <input id="username" type="text" className="validate" />
              <label htmlFor="username">Username</label>
            </div>

Before anyone tells me to use include the CDN line from https://materializecss.com/getting-started.html , I already have. 

<!--Import Google Icon Font-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">  

<!-- Compiled and minified CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">

<!-- Compiled and minified JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>

Does anyone have any idea what could be the problem then? The program currently runs locally hosted, and I read that could be a problem with materialize, and the only apparent solution I found so far is to download the icons package from google, but that would be silly to download 91k icon files for a program no? Hopefully there's a better solution

TheCoolest2
  • 33
  • 7
  • It's working here. https://codesandbox.io/s/0yz80yo3l0. Can be some local issue. Check your browser console if there are any errors. – Hardik Modha Dec 11 '18 at 07:53
  • @HardikModha Thanks for the response. I'm noticing 'Content Security Policy: The page’s settings blocked the loading of a resource at https://fonts.googleapis.com/icon?family=Material+Icons (“style-src”). Content Security Policy: The page’s settings blocked the loading of a resource at https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css (“style-src”). Content Security Policy: The page’s settings blocked the loading of a resource at https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js (“script-src”).' – TheCoolest2 Dec 11 '18 at 08:04
  • You can read this question/answer to know more about the issue and solution for it. https://stackoverflow.com/questions/37298608/content-security-policy-the-pages-settings-blocked-the-loading-of-a-resource – Hardik Modha Dec 11 '18 at 08:14
  • Unfortunately I already have tried that solution with no luck, it seems the only thing there that resolved it was completely getting read of the Content Security Line – TheCoolest2 Dec 11 '18 at 08:25
  • 1
    @HardikModha Well, I spent a few minutes trying to learn making a custom CSP, and I think I got a working now one. Thanks very much. I will mess around and see if I can tighten the security a bit more :). – TheCoolest2 Dec 11 '18 at 08:42

1 Answers1

1

How to use materialize-css with React with icons and other js features

yarn add materialize-css@next --save or npm install materialize-css@next --save

yarn add install material-icons or npm install material-icons

3.Kindly import the following like this ; snap

import 'materialize-css/dist/css/materialize.min.css';

import 'materialize-css/dist/js/materialize';

import 'material-icons/iconfont/material-icons.css'

Sepiocop
  • 11
  • 1