I am developing a qml-app and I want to put icons on the buttons. I would like to use ubuntu standard icons to get the real ubuntu look for my app. How can I do this?
-
You want to use icons from someone else? Mind the copyright! An icon is a creative work. It's copyrighted. So you should first check the copyright-license that comes with that icon. I had this webpage in my bookmarks. It's about Canonical - the business behind Ubuntu - hiring the 'Faenza' guy to create new icons.– user85164May 2, 2013 at 19:40
-
iloveubuntu.net/…– Daniel HolmJun 11, 2013 at 23:00
-
Surely, the api must provide a way to get an icon from the system wide theme. Why was this closed?– andrewsomethingJul 27, 2013 at 20:31
3 Answers
The official Ubuntu Touch icon theme is called Ubuntu Mobile, and is available for installation in the ubuntu-mobile-icons
package. Here is a sample of the icons provided:
To use the icons in your code, just use the path to the icon. For example, to set the icon in a toolbar button, do something similar to this:
ToolbarButton {
text: i18n.tr("Refresh")
iconSource: Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/reload.svg")
}
To avoid having to repeat the root path over and over again, I usually use a small function called getIcon
which returns the actual path to an icon:
function getIcon(name) {
return Qt.resolvedUrl("/usr/share/icons/ubuntu-mobile/actions/scalable/" + name + ".svg")
}
The previous example would then be:
ToolbarButton {
text: i18n.tr("Refresh")
iconSource: getIcon("reload")
}
-
3This answer needs to be updated. The correct and official way of using icons is, iconName: "reload" or iconSource: "image://theme/reload"– nik90Apr 16, 2014 at 13:32
I've only just started dabbling in QML, but it looks like the Ubuntu SDK provides a way to access icons from the theme, the Icon component. Here's a Hello Worldish example:
import QtQuick 2.0
import Ubuntu.Components 0.1
MainView {
id: root
objectName: "mainView"
width: units.gu(50)
height: units.gu(75)
property real margins: units.gu(2)
property real buttonWidth: units.gu(9)
Page {
title: i18n.tr("Icons!")
Column {
anchors {
fill: parent
margins: root.margins
}
spacing: units.gu(1)
Icon {
name: "call-start"
width: 48
height: 48
}
Icon {
name: "call-stop"
width: 48
height: 48
}
Icon {
name: "find"
width: 48
height: 48
}
}
}
}
This gives you:
AFAICT, this doesn't actually seem to support the full set of icons provided by the Freedesktop Icon Theme Specification though.....
The default theme for Ubuntu mobile is Suru and the icons are located in /usr/share/icons/suru
Any of the icons can be used by name. Even icons outside the Suru icon set.
If the file is /usr/share/icons/suru/actions/scalable/like.svg
The code could be:
Action {
id: likeAction
iconName: "like" // the files name without file ending
text: "I like this"
}
Which gives you an action button with a heart icon.