Ionicons – Ícones personalizados no Ionic

Ionic

Adicionar icon fonts ao Ionic é uma tarefa extremamente simples devido ao fato da equipe disponibilizar o código do ionicons no GitHub. Segue neste artigo os passos para ter seus ícones customizados trabalhando nativamente com o core do Ionic.

Por quê adiciona-los ao Ionicons?

Você pode muito bem usar outras fontes de icons juntamente com o Ionic, como, por exemplo, o Font Awesome mas você perderia o poder de usa-los diretamente em diretivas como é o caso de ion-tabs, ion-items, entre outras. A forma como o ionic foi construído conversa muito bem com o ionicons. Adicionando seus ícones ao ionicons você mantém o poder das diretivas e ganha em customização.

Clonando o repositório do ionicons

Para começar é preciso fazer um fork, clone ou download do repositório oficial do ionicons.

Instalando dependências

Para utilizar o script, escrito em python, de geração do ionicons é preciso ter instalado em seu computador o sass, fontforge e ttfautohint. Caso esteja utilizando um Mac, é preciso instalar, também, o XQuartz primeiro. No caso do linux, também é preciso instalar o woff-tools.

Segue abaixo comando de instalação do fontforge e ttfautohint para mac e Ubuntu:

OS X:

brew install fontforge ttfautohint

Ubuntu:

sudo apt-get install fontforge ttfautohint woff-tools

Adicionando seus ícones ao ionicons

O ionicons trabalha com o formato SVG de ícones. Logo é preciso que seus ícones estejam neste formato. É recomendável que o seus ícones estejam no padrão do ionicons que é um canvas de 512×512 pixels com o ícone centralizado. Caso não esteja, é possível que se tenha um resultado ruim ao utiliza-lo. Após padronizar os ícones, adicione-os à pasta src dentro do diretório do ionicons. Lembre-se de renomear cada ícone adicionado para o nome que deseja utiliza-lo. Por exemplo, se você adicionar um ícone de uma bola de futebol, renomeando o arquivo para soccer-ball você utilizaria a classe css ion-soccer-ball.

Gerando novos ionicons

Na pasta raiz do projeto ionicons customizado, pelo terminal, rode o seguinte comando: python ./builder/generate.py Se tudo der certo, você verá um output como este: Load Manifest, Icons: 751 
New Icon: 
– soccer-ball 
– 0xf159 
Save Manifest, Icons: 752 
Save Build, Icons: 752 
Generate SCSS 
Generate CSS From SCSS 
Generate Minified CSS From SCSS 
Generate LESS 
Generate Cheatsheet 
Generate component.json 
Generate composer.json 
Generate bower.json

Adicionando os novos ionicons ao seu projeto Ionic

Mescle as pastas: css, fonts e scss do seu projeto ionicons dentro da pasta /www/lib/ionic/ Caso não funcione, adicione o arquivo css gerado manualmente no index.html: Caso não dê certo, refaça os passos anterior ou deixe uma mensagem abaixo. Testamos nos computadores Ubuntu a partir das instruções encotrandas na referência citada abaixo.

Fonte: http://www.omerwazir.com/posts/custom-icons-with-ionicons/