3

I have a icon.svg file which has collection of icons. I want to use them in my app , as we show material icons.

Any idea how to include the file in app and use them ?

I have tried solution from :

Custom font import in Angular4

SVG icons from external file

how to generate webfont from SVG icons in angular

But i am not able to show the icon.

Here is how i want to use the icons : <span class="icon-home"></span> then it should show the home icon. I am also ready to use css as shown in some tutorial .icon-home:before { content: "\e900"; }

Can somebody please make me understand how it works?

programoholic
  • 4,830
  • 5
  • 20
  • 59
  • You're supposed to use [glyphter](https://glyphter.com/) or similar to create the font, download and load it in your project. You can drag&drop, resize and reposition each `` and set the class of the icons. – tao Dec 01 '18 at 12:41
  • @AndreiGheorghiu i have .ttf and .woff file too for icons. Can you explain me how do i include and use in my app. – programoholic Dec 01 '18 at 12:53
  • You download and place them in your app. You only need to include the provided `css` in your app. It is very important to keep the relative structure between the CSS file and the font files provided. If in the CSS font files are loaded from `fonts/someFontFileName` but you move the CSS and execute it from another location, it will no longer find the font files => you either move those too or you change the URL accordingly. I can't help more without seeing your code. – tao Dec 01 '18 at 13:12

1 Answers1

0

You just can put the sprite file of svgs in the assets folder and use it in your template components

Shorbagy
  • 526
  • 3
  • 4