Como hospedar ícones de materiais offline?

Minhas desculpas se esta é uma pergunta muito simples, mas como você usa os ícones de materiais do Google sem um

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

?

Eu gostaria que meu aplicativo pudesse exibir os ícones mesmo quando o usuário não tivesse uma conexão com a Internet

Método 2. Guia do desenvolvedor de auto-hospedagem

Baixe a versão mais recente do github (ativos: arquivo zip), descompacte e copie a pasta iconfont, contendo os arquivos de ícones do material design, em seu projeto local - https://github.com/google/material-design-icons/ lançamentos

Você só precisa usar a pasta iconfont do arquivo: ela contém as fontes dos ícones nos diferentes formatos (para suporte a vários navegadores) e css padrão.

• Substitua a fonte no atributo url de @ font-face, com o caminho relativo para a pasta iconfont em seu projeto local, (onde os arquivos de fonte estão localizados), por exemplo. 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>

Pacotes NPM / Bower

O Google oficialmente tem uma opção de dependência Bower e NPM - siga o Guia de ícones de materiais 1

Usando caramanchão :bower install material-design-icons --save

Usando o NPM :npm install material-design-icons --save

Ícones de materiais : como alternativa, consulte a fonte do ícone do material design e a estrutura CSS para hospedar os ícones automaticamente, em https://marella.me/material-icons/ de @marella

Nota

Parece que o Google tem o projeto em modo de baixa manutenção. O último lançamento foi, no momento da escrita, 3 anos atrás!

Existem vários problemas no GitHub em relação a isso, mas eu gostaria de consultar o comentário de @cyberalien sobre o problema, Is this project actively maintained? #951onde se refere a vários projetos da comunidade que se bifurcaram e continuam mantendo ícones de materiais.

Estou construindo para Angular 4/5 e frequentemente trabalho offline, então o seguinte funcionou para mim. Primeiro instale o NPM:

npm install material-design-icons --save

Em seguida, adicione o seguinte a styles.css:

@import '~material-design-icons/iconfont/material-icons.css';

As abordagens superiores não funcionam para mim. Eu baixei os arquivos do github, mas o navegador não carregou as fontes.

O que fiz foi abrir o link da fonte do ícone do material:

https://fonts.googleapis.com/icon?family=Material+Icons

e eu vi esta marcação:

    /* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2');
}

.material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -moz-font-feature-settings: 'liga';
  -moz-osx-font-smoothing: grayscale;
}

Abro o link do URL da fonte woff https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2

e baixe o arquivo woff2.

Em seguida, substituo o caminho do arquivo woff2 pelo novo em material-icons.css

@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'),
       /* Old file: url(iconfont/MaterialIcons-Regular.woff2) format('woff2'), */
       /* load new file */ 
       url(2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2) format('woff2'),
       url(iconfont/MaterialIcons-Regular.ttf) format('truetype');
}

Isso faz com que as coisas funcionem para mim.

Se você usar o projeto webpack, após

npm install material-design-icons --save

você só precisa

import materialIcons from 'material-design-icons/iconfont/material-icons.css'

Esta pode ser uma solução fácil

Obtenha este repositório que é uma bifurcação do repositório original publicado pelo Google.

Instale-o com bower ou npm

bower install material-design-icons-iconfont --save

npm install material-design-icons-iconfont --save

Importe o arquivo css em sua página HTML

<style>
  @import url('node_modules/material-design-icons-iconfont/dist/material-design-icons.css');
</style>

ou

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

Teste: adicione um ícone dentro da tag do corpo do seu arquivo HTML

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

Se você vir o ícone do rosto, está bem.

Se não funcionar, tente adicionar isso ..como prefixo ao node_modulescaminho:

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

Minha receita tem três etapas:

1. para instalar o pacote material-design-icons

   npm install material-design-icons

2. para importar o arquivo material-icons.css para o arquivo / projeto .less ou .scss

   @import "~/node_modules/material-design-icons/iconfont/material-icons.css";

3. para incluir o código recomendado no arquivo / projeto reactjs .js

   <i className='material-icons' style={{fontSize: '36px'}}>close</i>

Use material-design-icons-iconfont

Divulgação completa, sou o autor deste pacote

O projeto de material-design-icons do Google está em baixa manutenção e desatualizado por um tempo . Há uma lacuna entre a versão em https://material.io/icons/ e a versão em material-design-icons .

Criei material-design-icons-iconfont para resolver esses problemas principais:

• material-design-icons jams npm install- todos os arquivos svg / xml / ... irrelevantes foram removidos
• Os arquivos de fonte estão sempre atualizados direto do Google FontsCDN
• Suporte para scss

Instalar via npm

npm install material-design-icons-iconfont --save

Depende de como você compacta seu aplicativo da web ( webpack/ gulp/ bower/ ...), você precisará importar o arquivo .css/ .scss(e pode alterar o caminho relativo das fontes)

Importar usando SCSS

Importe em um de seus arquivos sass

$material-design-icons-font-path: '~material-design-icons-iconfont/dist/fonts/';
@import '~material-design-icons-iconfont/src/material-design-icons';

Mais tarde, faça referência ao ícone <i class="material-icons">+ id do ícone +</i>

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

• leia as instruções completas em material-design-icons-iconfont para mais métodos de importação

Página de demonstração

Ele vem com uma página de demonstração leve para auxiliar na busca e colagem de fontes

Tentei compilar tudo o que precisa ser feito para ícones de auto-hospedagem em minha resposta. Você precisa seguir estas 4 etapas simples.

1. Abra a pasta iconfont do repositório materialize

   link- https://github.com/google/material-design-icons/tree/master/iconfont

2. Baixe esses três arquivos de ícones ->

   MaterialIcons-Regular.woff2 - formato ('woff2')

   MaterialIcons-Regular.woff - format ('woff')

   MaterialIcons-Regular.ttf - format ('truetype');

   Nota- Após o download, você pode renomeá-lo como quiser.

3. Agora, vá para seu CSS e adicione este código

@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;
  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';
}

Nota: O endereço fornecido em src: url (...) deve ser relativo ao 'Arquivo CSS' e não ao arquivo index.html. Por exemplo, pode ser src: url (../ myicons / MaterialIcons-Regular.woff2)

4. Você está pronto para usar agora e aqui está como isso pode ser feito em HTML

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

Clique aqui para ver todos os ícones que podem ser usados.

Depois de fazer isso npm install material-design-icons, adicione ao seu arquivo CSS principal:

@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(~/material-design-icons/iconfont/MaterialIcons-Regular.eot); /* For IE6-8 */
  src: local('Material Icons'),
       local('MaterialIcons-Regular'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff2) format('woff2'),
       url(~material-design-icons/iconfont/MaterialIcons-Regular.woff) format('woff'),
       url(~material-design-icons/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';
}

Com cli angular

npm install angular-material-icons --save

ou

npm install material-design-icons-iconfont --save

material-design-icons-iconfont é a versão atualizada mais recente dos ícones. angular-material-icons não é atualizado por muito tempo

Aguarde, aguarde, aguarde a instalação ser concluída e adicione-o ao angular.json -> projetos -> arquiteto -> estilos

 "styles": [
          "node_modules/material-design-icons/iconfont/material-icons.css",
          "src/styles.scss"
        ],

ou se você instalou material-desing-icons-iconfont,

"styles": [
              "node_modules/material-design-icons-iconfont/dist/material-design-icons.css",
              "src/styles.scss"
            ],

Atualização de 2019 aqui:

Para hospedar seus ícones de materiais, os regulares, arredondados, afiados, todas as variantes. Vá buscá-los neste repositório: https://github.com/petergng/material-icon-font

Por algum motivo, não sei por que essas fontes não são facilmente acessíveis nos repositórios do Google.

Mas aqui está.

Depois de baixar o pacote, vá para a pasta bin e você verá as quatro variantes. Claro, cabe a você usar qualquer um deles.

Para usá-los, crie um arquivo css e

1. Gere uma fonte para cada variante necessária:

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

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

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

O urllink para onde os ícones estão localizados em seu projeto.

2. Agora vamos registrar as classes de ícones:

.material-icons-outlined, .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;
}

Isso fará com que ambas as classes .material-icons-outlined, e .material-iconsusem os mesmos padrões. Se você quiser usar .material-icons-sharp, basta anexar aos nomes das duas classes.

3. Por fim, vamos inserir a face da fonte que você obteve na etapa 1.

.material-icons {
    font-family: 'Material Icons';
}

.material-icons-outlined {
    font-family: 'Material Icons Outline';
}

Novamente, para usar mais variantes, como Sharp, basta adicionar seu bloco como os dois acima.

Uma vez feito ... vá para o seu html e use os ícones recém-criados.

<i class="material-icons-outlined">hourglass_empty</i>

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

Em http://materialize.com/icons.html as informações do cabeçalho de estilo que você inclui na página, você pode ir para o hiperlink real e fazer cópias localizadas para usar ícones offline.

Veja como.NB: Você fará o download de dois arquivos em todos icon.css e somefile.woff .

1. Vá para o seguinte URL, conforme exigido no cabeçalho

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

Salve a página como nome_do_arquivo.css. O padrão é icon.css

2. Procure por uma linha como esta

src: local('Material Icons'), local('MaterialIcons-Regular'), url(https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2)

3. Visite o URL que tem .woff terminando

https://fonts.gstatic.com/s/materialicons/v22/2fcrYFNaTjcS6g4U3t-Y5ZjZjT5FdEJ140U2DJYC3mY.woff2. Seu navegador fará o download automaticamente. Salve-o em sua pasta CSS.

4. Agora você deve ter os dois arquivos icon.css e 2fcrYFNa .... mY.wof22 , salve-os em seu css. Agora faça edições no local do cabeçalho css para o icon.css em seus diretórios. Apenas certifique-se de que o arquivo .woff2 esteja sempre na mesma pasta que o icon.css. Sinta-se à vontade para editar os nomes longos dos arquivos.

O título da pergunta pergunta como hospedar ícones de material offline, mas o corpo esclarece que o objetivo é usar os ícones de material offline (grifo meu) .

Usar sua própria cópia dos arquivos de ícones de materiais é uma abordagem / implementação válida. Outro, para aqueles que podem usar um prestador de serviço, é deixar que ele cuide disso. Dessa forma, você não terá o incômodo de obter uma cópia e mantê-la atualizada.

Por exemplo, gere um service worker usando o Workbox , usando a abordagem mais simples de executar workbox-cli e aceitando os padrões, depois anexe o seguinte texto ao service worker gerado:

workboxSW.router.registerRoute('https://fonts.googleapis.com/(.*)',
workboxSW.strategies.cacheFirst({
  cacheName: 'googleapis',
  cacheExpiration: {
    maxEntries: 20
  },
  cacheableResponse: {statuses: [0, 200]}
})
);

Você pode verificar se ele foi armazenado em cache no Chrome usando F12> Aplicativo> Armazenamento> IndexedDB e procurar por uma entrada com googleapis no nome.

Em 2020, minha abordagem é usar o pacote material-icons-font . Ele simplifica o uso do pacote material-design-icons do Google e do material-design-icons-iconfont baseado na comunidade .

1. Instale o pacote. npm install material-icons-font --save

2. Adicione o caminho do arquivo CSS do pacote à propriedade de estilo do arquivo angular.json do seu projeto.

   ... "styles": [ "./node_modules/material-icons-font/material-icons-font.css" ], ...

3. Se estiver usando SCSS, copie o conteúdo abaixo para a parte superior do seu arquivo styles.scss.

   @import '~material-icons-font/sass/variables'; @import '~material-icons-font/sass/mixins'; $MaterialIcons_FontPath: "~material-icons-font/fonts"; @import '~material-icons-font/sass/main'; @import '~material-icons-font/sass/Regular';

4. Use os ícones do arquivo HTML do seu projeto.

   // Using icon tag
   <i class="material-icons">face</i>
   <i class="material-icons md-48">face</i>
   <i class="material-icons md-light md-inactive">face</i>
   
   // Using Angular Material's <mat-icon> tag
   <mat-icon>face</mat-icon>
   <mat-icon>add_circle</mat-icon>
   <mat-icon>add_circle_outline</mat-icon>

Ícones de @ angular / material tendem a quebrar durante o desenvolvimento offline. Adicionar o pacote material-icons-font em conjunto com @ angular / material permite que você use a tag enquanto desenvolve offline.

Instale o pacote npm

npm install material-design-icons --save

Coloque o caminho do arquivo css para o arquivo styles.css

@import "../node_modules/material-design-icons-iconfont/dist/material-design-icons.css";

O método Kaloyan Stamatov é o melhor. Primeiro acesse https://fonts.googleapis.com/icon?family=Material+Icons . e copie o arquivo css. o conteúdo se parece com este

/* fallback */
@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2) format('woff2');
}
    
.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

Cole a fonte da fonte no navegador para baixar o arquivo woff2 https://fonts.gstatic.com/s/materialicons/v37/flUhRq6tzZclQEJ-Vdg-IuiaDsNc.woff2 Em seguida, substitua o arquivo na fonte original. Você pode renomeá-lo se quiser. Não há necessidade de baixar o arquivo de 60 MB do github. Simplesmente morto Meu código se parece com isto

@font-face {
    font-family: 'Material Icons';
    font-style: normal;
    font-weight: 400;
    src: url(materialIcon.woff2) format('woff2');
}

.material-icons {
    font-family: 'Material Icons';
    font-weight: normal;
    font-style: normal;
    font-size: 24px;
    line-height: 1;
    letter-spacing: normal;
    text-transform: none;
    display: inline-block;
    white-space: nowrap;
    word-wrap: normal;
    direction: ltr;
    -moz-font-feature-settings: 'liga';
    -moz-osx-font-smoothing: grayscale;
}

enquanto materialIcon.woff2 é o arquivo woff2 baixado e substituído.

npm install material-design-icons

e

@import '~material-design-icons/iconfont/material-icons.css';

funcionou também para mim com Angular Material 8

Adicionado isso à configuração da web e o erro foi embora

<system.webServer>
    <staticContent>
      <remove fileExtension=".woff" /> 
      <mimeMap fileExtension=".woff" mimeType="application/x-font-woff" />
      <remove fileExtension=".woff2" /> 
      <mimeMap fileExtension=".woff2" mimeType="application/font-woff2" />
    </staticContent>

A propósito, há um vídeo disponível no youtube com instruções passo a passo.

https://youtu.be/7j6eOkhISzk

1. Estas são as etapas. Baixe o pacote do ícone materialize em https://github.com/google/material-design-icons/releases

2. Copie a pasta icon-font e renomeie-a como icons.

3. Abra o arquivo materialize.css e atualize os seguintes caminhos:

uma. de url (MaterialIcons-Regular.eot) para url (../ fonts / MaterialIcons-Regular.eot) b. do formato url (MaterialIcons-Regular.woff2) ('woff2') para o formato url (../ fonts / MaterialIcons-Regular.woff2) ('woff2') c. do formato url (MaterialIcons-Regular.woff) ('woff') para o formato url (../ fonts / MaterialIcons-Regular.woff) ('woff') d. do formato url (MaterialIcons-Regular.ttf) ('truetype') para o formato url (../ fonts / MaterialIcons-Regular.ttf) ('truetype')

3. Copie o materialize-icon.css para sua pasta css e faça referência a ele em seu arquivo html.

Tudo funcionará como mágica!