Giter Club home page Giter Club logo

material-design-icon-fonts-self-hosted-web's Introduction

Self-hosted version generator of Google Material Design icon fonts for web apps

This is NOT a fork of the material design icons by Google, including only the font files for smaller distribution.

This is a generator script which fetches the iconfont from the original material design icons repo, converts otf fonts to woff, and makes it possible to use the self-hosted version of the latest material design icons for web.

Requirements

Supported operating systems

Core dependencies

Local script usage

Clone the repo, cd into the project directory and execute from root

$ bash src/generate-iconfont.sh

Fonts will be generated in the ./iconfont directory relative to the project root.

Material design icons

Material design icons are the official icon set from Google that are designed under the material design guidelines.

Developer guide

Read the developer guide on how to use the material design icons in your project.

Using the font collection (recommended way as per Google)

The iconfont folder contains pre-generated font files that can be included in a project. This is especially convenient for the web. However, it is generally better to link to the web font hosted on Google Fonts:

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

Using the self-hosted version

Install the package. Exexute

npm i --save-dev material-design-icon-fonts-self-hosted-web

or

yarn add -D material-design-icon-fonts-self-hosted-web

Angular

Add one of the folowing css files to the styles array of a corresponding app in angular.json depending on which version of the icons are intended to be used in the app.

Regular
"styles": [
  "node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons.css"
],
Outlined
"styles": [
  "node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-outlined.css"
],
Round
"styles": [
  "node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-round.css"
],
Sharp
"styles": [
  "node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-sharp.css"
],
TwoTone
"styles": [
  "node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-twotone.css"
],

material-design-icon-fonts-self-hosted-web's People

Contributors

rfprod avatar

Stargazers

avatar

Watchers

avatar avatar avatar avatar

material-design-icon-fonts-self-hosted-web's Issues

[Bug]: Commands not found (woff2_compress mkeot eot2ttf)

Contact Details

No response

What happened?

./src/generate-iconfont.sh: line 68: woff2_compress: command not found
./src/generate-iconfont.sh: line 70: mkeot: command not found
./src/generate-iconfont.sh: line 71: eot2ttf: command not found
./src/generate-iconfont.sh: line 72: woff2_compress: command not found
./src/generate-iconfont.sh: line 74: mkeot: command not found
./src/generate-iconfont.sh: line 75: eot2ttf: command not found
./src/generate-iconfont.sh: line 76: woff2_compress: command not found
./src/generate-iconfont.sh: line 78: mkeot: command not found
./src/generate-iconfont.sh: line 79: eot2ttf: command not found
./src/generate-iconfont.sh: line 80: woff2_compress: command not found
./src/generate-iconfont.sh: line 82: mkeot: command not found
./src/generate-iconfont.sh: line 83: eot2ttf: command not found
./src/generate-iconfont.sh: line 84: woff2_compress: command not found

How to reproduce?

npm i --save-dev material-design-icon-fonts-self-hosted-web

What did you expect?

It to install

Device specification and environment

- type:
- OS:
- Node:
- npm:
- yarn:

What browsers are you seeing the problem on?

No response

Relevant log output

No response

Additional context

No response

Code of Conduct

  • I agree to follow this project's Code of Conduct

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.