CODEWITHSUNDEEP
javascripthtmlcssmaterialize
The Mediocre Gatsby
The Mediocre Gatsby

Reputation: 43

Should importing material design icons work offline with my current code?

I'm currently designing a UI for an automated parking system. It needs to be able to work offline, as we don't know if the valet will have internet connectivity. I also need to use Material Design icons. I've ran tests of my html code to see if Material Design icons would work offline, however, on occasions the page would load fine, on other occasions Google Chrome would crash. I would be very grateful for insight on what is happening and how to ensure my page loads offline with the required material design icons.

<!DOCTYPE html>
  <html>
    <head>
      <!--Import materialize.css-->
      <link type="text/css" rel="stylesheet" href="css/materialize.css"  media="screen,projection"/>
      <!--Import the css I designed for this UI specifically-->
      <link type="text/css" rel="stylesheet" href="css/menu.css"/>
      <!--Import Material Design icons-->
      <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
      <!--Import jQuery before materialize.js-->
      <script src="jquery-1.11.3.min.js"></script>
      <script type="text/javascript" src="js/materialize.min.js"></script>
      <!--Import jQuery Keypad CSS-->
      <link type="text/css" href="css/jquery.keypad.aps.css" rel="stylesheet">
      <script type="text/javascript" src="js/jquery.plugin.js"></script>
      <script type="text/javascript" src="js/jquery.keypad.js"></script>

      <!--Touchscreen keypad for ticket num input just in case ticket scanner doesn't work or they want to edit the ticket number (e.g.ticket scanner makes mistake)-->
      <script>
        $(document).ready(function(){
          $('#inmenuKeypad').keypad({target: $('#ticket_num'),layout: ['789'+ $.keypad.CLEAR,'456' + $.keypad.BACK,'1230-']
          });
        });
      </script>
    </head>

    <body>
      <!--Page Title Panel-->
      <div class="card-panel">
        <h4>INPARK</h4>
        <!--Options button, reveals dropdown menu with options to switch to other pages-->
        <a id="optionsbtn" class='dropdown-button btn' href='#' data-activates='dropdown1' data-constrainwidth='false'>Options</a>
      </div>
      <!--Dropdown menu structure and it's items-->
      <ul id="dropdown1" class="dropdown-content">
        <li><a href="dashmenu.html">Dashboard</a></li>
        <li class="divider"></li>
        <li><a href="outmenu.html">Outpark</a></li>
        <li class="divider"></li>
        <li><a href="qmenu.html">Outpark Queue Menu</a></li>
        <li class="divider"></li>
        <li><a href="shufflemenu.html">Shuffle</a></li>
        <li class="divider"></li>
      </ul>
      <!--The form where valet inputs the customer's ticket number for Inpark-->
      <div class="row">
        <form class="col s12" action="ineem.html"><!--Change to the action to send data to some kind of data handler page/script-->
          <div class="row">
            <div class="input-field col s5 offset-s3">
              <input placeholder="Enter ticket number" id="ticket_num" type="text" class="validate">
            </div>
            <button class="btn waves-effect waves-light" class="col s9" type="submit">OK</button>
          </div>
        </form>
      </div>
      <!--Dashboard button, press to return to dashboard(FAB)-->
      <div class="fixed-action-btn" style="bottom: 45px; right: 24px;">
        <a class="btn-floating btn-large waves-effect waves-light" href="dashmenu.html">
          <i class="material-icons" style="font-size: 48px">home</i>
        </a>
      </div>
      <!--Touchscreen Keypad-->
      <div id="inmenuKeypad"></div>

    </body>
  </html>

Upvotes: 3

Views: 13153

Answers (2)

Bjoerg
Bjoerg

Reputation: 1331

You still have a link to https://fonts.googleapis.com/icon?family=Material+Icons inside the above code.

The only link for the icons in the HTML header I have is:

<link href="fonts/google-material/material.css" rel="stylesheet" />

path to material icon files

The material.css file has the following definition:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(MaterialIcons-Regular.woff2) format('woff2'),
       url(MaterialIcons-Regular.woff) format('woff'),
       url(MaterialIcons-Regular.ttf) format('truetype');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  display: inline-block;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  width: 1em;
 /* height: 1em;
  line-height: 1;*/
  /* Support for all WebKit browsers. */
  -webkit-font-smoothing: antialiased;
  /* Support for Safari and Chrome. */
  text-rendering: optimizeLegibility;

  /* Support for Firefox. */
  -moz-osx-font-smoothing: grayscale;

  /* Support for IE. */
  font-feature-settings: 'liga';
}

In HTML I use the &#x[code]; definition and the icons are displayed offline in all browsers like a charm:

<i class="material-icons">&#xE14F;</i>

I got the library from: Material icons guide

Upvotes: 7

ervi
ervi

Reputation: 21

See the Material Icons Guide section 'Getting Icons'. I use npm (or bower) like:

npm install material-design-icons --save

and then just source the material-icons.css file included in the package:

<link href="node_modules/material-design-icons/iconfont/material-icons.css"
  rel="stylesheet">

Of course you need to change the path with whatever you serve.

Upvotes: 2

Related Questions