Google Material Icons

WEB TMS WEB Core
1

Hi,

Will these work in an offline PWA app?

Thanks,

Ken

2

As-is no. You can see that adding Material Icons support from the IDE adds

to your project HTML. This is a link the PWA generator cannot see.
You need to download this file and embed it into the app if you want it to be cached for offline use in a PWA.

3

Presumably this applies to bootstrap too?

4

I am seeing these icons when the PWA is offline without changing anything. Does this mean they are being cached by the browser?

5

Must have been cached but this isn't reliable for an offline PWA.
If the user deletes the regular browser cache, this will be removed.

6

Thanks. I'm unsure what I need to do. Do I just have to include the file MaterialIcons-Regular.ttf or is it more complex?

7

Could I please have a response to my last post.

8

I have not done this here before and I could not allocate time to investigate your specific wish.
The rule is simple though, identify the files used, download these and include these in the app instead of the remote URL reference in the project HTML file.

9

This works for me. I'm not sure if I need all of the files:

<style>
  @font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(Material-Icons-Baseline.eot); /* For IE6-8 */
    src: local('Material-Icons-Baseline'),
    url(Material-Icons-Baseline.woff2) format('woff2'),
    url(Material-Icons-Baseline.woff) format('woff'),
    url(Material-Icons-Baseline.svg) format('svg'),
    url(Material-Icons-Baseline.ttf) format('truetype');
  }
  .material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    color: white; /* I wanted mine to be always white */
    font-size: 32px;  /* I changed this from 24 */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
    /* 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';
  }