Material Design Icons And SVG

Material Design Icons And SVG
0
#1

So for my webpage, I need four icons to represent efficiency, quality, creativity, and originality. What are some ideas or symbols that could convey these topics? (Something simple like a lightbulb or speedometer)

Next, I cannot decide whether to use an SVG or an icon from a library. What are the advantages and disadvantages? For example, SVG’s are often limited and I heard that they slow loading times but they are detailed and can be colorful. On the other hand, icon libraries don’t always have the visual representation you want. Does anyone know which one is better? And which icon libraries are better?

I found this library with many icons which I could use… but is it fine and how do you use it?

Thanks! :sweat_smile:

#2

Hey @shaux,

Icon libraries are a collection of SVGs. It would be incredibly tedious to design and generate a SVG for every icon you want, but of course it can be done. You can also use images.

For starters I would recommend checking out font awesome, a very well-known icon library. It comes with Bootstrap.

How you use icons depends on which technologies you are using. Generally you’ll import a CSS file from a CDN then apply classes to icon html tags.

Good luck!
Austin

1 Like
#3

I am not sure why but the classes from font awesome only are working if I import two cdns. Is there are a simpler way to use font awesome without importing bootstrap completely. Here are the two cdns:

    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css"
    />
    <link
      href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"
      rel="stylesheet"
      integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN"
      crossorigin="anonymous"
    />