Skip to content

Icons

Jump to bottom
Pablo Mayobre edited this page Mar 25, 2015 · 5 revisions

#Icons Material-Design has a set on Guidelines on how you should design your system icons, in order to standardize this icons. Google set up a repository with Material-Design Icons which contains lots of icons.

Using the icons in this repo, and thanks to the MDI project, Material-Love provides access to 1008 icons through the icons.ttf font which can be found in the assets folder.

But in order to use them you need to know which UTF-8 character corresponds to each glyph. To make it easier to use this font, Material-love provides a table where each key is a glyph's name and the values are the UTF-8 characters.

Using it

Using it is pretty simple, you just need to include the icons.lua library in your project, and set up the font

love.load = function ()
    iconfont = love.graphics.setNewFont("material-love/assets/icons.ttf")
    icons = require "material-love.libs.icons"
end

There are a couple of things you can do with the icons library. But the most important thing is getting the icon character, to do that just call icons.get with a valid icon name:

love.graphics.print(icons.get("done"),10,10)

The icons library works with an internal table that can't be modified, but you can still get a copy using the icons.list function

local i = 1
for k,v in pairs(icons.list()) do
    love.graphics.setFont(default)
    love.graphics.print(k, 10, i * 30)
    love.graphics.setFont(icons)
    love.graphics.printf(v, 0,i * 30,love.graphics.getWidth(),"right")
    i = i + 1
end

Other method is using the icons.names function, this return the icons name as values while the keys are numbers.

local t = icons.names
for i=1, #t do
    love.graphics.setFont(default)
    love.graphics.print(t[i], 10, i * 30)
    love.graphics.setFont(icons)
    love.graphics.printf(icons.get(t[i]), 0,i * 30,love.graphics.getWidth(),"right")
end

Drawing icons

We also provide a special library to draw icons called drawicons.lua for more info check DrawIcons

Available icons

Since manually checking is tedious, There is a list of available icons in the Material Design Icons project page.

Custom icon font

You can generate you own icon font using Icomoon, which outputs a font.ttf file and a style.css file.

To generate the lua file you can use this script.

Note: This is not the same font used by this project so the output wont be anyway similar to the one in Material-Love. This means that the available icon page provided by MDI will be useless

Luckily you can use the demo.html file generated by Icomoon for a list of available icons and their names.

You can find my selection.json here in order to upload it to Icomoon and get the selection of 670 icons (again, this is not the same font used in Material-Love)

Files

The only file needed for this lib to work is libs/icons.lua but it is rather pointless without the font assets/icons.ttf and you most likely will like to use libs/drawicons.lua library.

Clone this wiki locally