How Md-Icons Are Rendered on Browser

how md-icons are rendered on browser

As per the material icon's documentation

It’s easy to incorporate icons into your web page.

<i class="material-icons">face</i> // rendered as face

This example uses a typographic feature called ligatures, which allows
rendering of an icon glyph simply by using its textual name. The
replacement is done automatically by the web browser and provides more
readable code than the equivalent numeric character reference

And here is the detailed answer on stackoverflow

How do ligature icons work in Material Icons?

Icon not rendering properly in Firefox when adding them by SASS

Disclaimer: I can't verify that any of the solutions I've written below work as I can't replicate the issue on my device in the JSFiddle you provided.
It displays fine for me in Firefox and Chrome. FWIW: I'm using a Mac
Mini on MacOS 10.14.6 with a 4K display @ 1920 x 1080 (i.e. HiDPI).
The same browser (i.e. Firefox) may handle fonts differently on
depending on operating system and hardware setup.

Solution

The demo link for md-steppers uses SVG data in the CSS:

.md-step.md-complete md-step-label-wrapper::before {
    content: '\7';
    background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>') no-repeat center center; }

See Line 398

I would probably try using this same method and avoid using the icon font if you think this is where the issue is arising from. If you also have the same issue in Firefox at the md-steppers demo link above then I guess the issue is bigger than just icon fonts and is also affecting SVGs. You can scroll down further to: Other Possible Fixes.

The Material Design icons can be downloaded in SVG format from here.
Use the search filter in the sidebar and type in edit for the icon you want, then press the [Download] SVG 24 button in the bottom left corner.

The icon you download will be the default black colour so there are some changes you will need to make in order to make it suitable for you to use.

Open up the downloaded SVG in a code editor and refer to the way the SVG is formatted in the CSS for the md-steppers demo. Change the height and width properties, and also add the fill property to the <svg> tag, so it should look something like:

<svg xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16" fill="rgba(255,255,255,0.87)"><path ...leave as is... /><path ...leave as is... /></svg>

Copy the SVG code as a single line and use it in a similar way that it's used in the md-steppers demo CSS:

.md-step.md-active md-step-label-wrapper::before, .md-step.md-success md-step-label-wrapper::before {
    content: '\7';
    background: #106cc8 url('data:image/svg+xml;utf8,<svg fill="rgba(255,255,255,0.87)" xmlns="http://www.w3.org/2000/svg" height="16" viewBox="0 0 24 24" width="16"><path d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34c-.39-.39-1.02-.39-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/><path d="M0 0h24v24H0z" fill="none"/></svg>') no-repeat center center;
}

JSFiddle: https://jsfiddle.net/wx0brdjL/

Alternatively, you can save the SVG after you modify the width/height/fill to a file, then reference it in your CSS like:

background-image: url('edit-24px.svg');

---

Other Possible Fixes:

If using the SVG above is still causing things to blur on Firefox, or if you want to stick with using the icon font, there are a few things to try which might fix the way that the icon font renders on your device:

---

Option 1

Applying transform: translateZ(0) to either &.md-active md-step-label-wrapper or &:before.

---

Option 2

Applying the font-smoothing (see Firefox specific vendor prefix) or text-rendering CSS properties. Keeping in mind that changes here might affect the way it renders on someone else's device.

---

Option 3

I just came across this open issue on the Material Design Icons Github where a user recommends using this CSS hack: transform: rotate(0.03deg)

md-icon-button is not being rendered properly

To be closed.

I haven't add MdButtonModule to import list.

How to host material icons offline?

Method 2. Self hosting Developer Guide

Download the latest release from github (assets: zip file), unzip, and copy the font folder, containing the material design icons files, into your local project -- https://github.com/google/material-design-icons/releases

You only need to use the font folder from the archive: it contains the icons fonts in the different formats (for multiple browser support) and boilerplate css.

• Replace the source in the url attribute of @font-face, with the relative path to the iconfont folder in your local project, (where the font files are located) eg. url("iconfont/MaterialIcons-Regular.ttf")

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

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;  /* Preferred icon size */
  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';
}

---

<i class="material-icons">face</i>

---

NPM / Bower Packages

Google officially has a Bower and NPM dependency option -- follow Material Icons Guide 1

Using bower : bower install material-design-icons --save

Using NPM : npm install material-design-icons --save

Material Icons : Alternatively look into Material design icon font and CSS framework for self hosting the icons, from @marella's https://marella.me/material-icons/

---

Note

It seems google has the project on low maintenance mode. The last
release was, at time of writing, 3 years ago!

There are several issues on GitHub regarding this, but I'd like to
refer to @cyberalien comment on the issue Is this project actively maintained? #951 where it refers several community projects that
forked and continue maintaining material icons.

---

Icon Fonts: How do they work?

Glyphicons are images and not a font. All the icons are found within a sprite image (also available as individual images) and they are added to the elements as positioned backround-images:

Actual font icons (FontAwesome, for instance) do involve downloading a specific font and make use of the content property, for instance:

@font-face {
    ...
    src: url('../font/fontawesome-webfont.eot?#iefix&v=3.0.1') format('embedded-opentype'),
         url('../font/fontawesome-webfont.woff?v=3.0.1') format('woff'),
         url('../font/fontawesome-webfont.ttf?v=3.0.1') format('truetype');
    ...
}

.icon-beer:before {
    content: "\f0fc";
}

As the content property isn't supported in older browsers, these also make use of images.

Here's an example of completely raw FontAwesome in use as a font, turning  ( - you may not be able to see this!) into an ambulance: http://jsfiddle.net/GWqcF/2

Angular Material Icons Not Rendering Within Component

Most likely what happened is you used npm install rather than ng add to install angular material. ng add performs some extra steps for an angular project.

Your best bet is to run ng add @angular/material to reinstall.

Exactly what extra steps are performed are located here: https://material.angular.io/guide/getting-started

Like was mentioned in another answer, missing this stylesheet from index.html will break mat-icons

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

Just an update: the author's ng add command was failing due to a bug involving git bash https://github.com/angular/angular-cli/issues/21512. Switching to a different shell solved the issue.

---

Related Topics