https://github.com/rfprod/material-design-icon-fonts-self-hosted-web
Self-hosted version generator of Google Material Design icon fonts for web apps.
https://github.com/rfprod/material-design-icon-fonts-self-hosted-web
font google icon-font iconfont iconfont-dowloader icons material material-design webfont-generator
Last synced: 6 months ago
JSON representation
Self-hosted version generator of Google Material Design icon fonts for web apps.
- Host: GitHub
- URL: https://github.com/rfprod/material-design-icon-fonts-self-hosted-web
- Owner: rfprod
- License: apache-2.0
- Created: 2021-08-08T17:10:33.000Z (about 5 years ago)
- Default Branch: main
- Last Pushed: 2022-10-05T15:08:14.000Z (almost 4 years ago)
- Last Synced: 2025-10-08T07:51:52.593Z (10 months ago)
- Topics: font, google, icon-font, iconfont, iconfont-dowloader, icons, material, material-design, webfont-generator
- Language: Shell
- Homepage: https://www.npmjs.com/package/material-design-icon-fonts-self-hosted-web
- Size: 34.2 KB
- Stars: 2
- Watchers: 2
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
- Code of conduct: CODE_OF_CONDUCT.md
- Codeowners: .github/CODEOWNERS
- Security: SECURITY.md
Awesome Lists containing this project
README
# Self-hosted version generator of Google Material Design icon fonts for web apps
This is `NOT` a fork of the [material design icons](https://github.com/google/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](https://github.com/google/material-design-icons), 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
- [Debian based Linux](https://en.wikipedia.org/wiki/List_of_Linux_distributions#Debian-based)
### Core dependencies
- [Node.js](https://nodejs.org/)
- [Git](https://git-scm.com/)
- [Bash 5](https://www.gnu.org/software/bash/)
## Local script usage
Clone the repo, `cd` into the project directory and execute from root
```bash
$ 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](http://www.google.com/design/spec/style/icons.html#icons-system-icons) from Google that are designed under the [material design guidelines](http://www.google.com/design/spec).
## Developer guide
Read the [developer guide](http://google.github.io/material-design-icons/) 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:
```html
```
### Using the self-hosted version
Install the package. Exexute
```bash
npm i --save-dev material-design-icon-fonts-self-hosted-web
```
or
```bash
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
```json
"styles": [
"node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons.css"
],
```
##### Outlined
```json
"styles": [
"node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-outlined.css"
],
```
##### Round
```json
"styles": [
"node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-round.css"
],
```
##### Sharp
```json
"styles": [
"node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-sharp.css"
],
```
##### TwoTone
```json
"styles": [
"node_modules/material-design-icon-fonts-self-hosted-web/iconfont/material-icons-twotone.css"
],
```