[WIP] Use image provider to load icons

Not implemented AwesomeIcons
Some improvements can be made in properties like "name" and "source" to make the code even simpler

Author: ricardomv

demo/IconsDemo.qml

@@ -166,7 +166,7 @@ Item {
 
                 Repeater {
                     id: awesomeList
-                    model: Object.keys(awesomeIcon.icons)
+                    //model: Object.keys(awesomeIcon.icons)
                     delegate: Item {
                         width: section.state == "list" ? Units.dp(240) : icon.size
                         height: icon.size

modules/Material/Action.qml

@@ -44,7 +44,7 @@ Controls.Action {
        \sa iconName
        \sa Icon
      */
-    property string iconSource: "icon://" + iconName
+    property string iconSource: "image://material/" + iconName
 
     /*!
        The text displayed for the action.

modules/Material/ActionBar.qml

@@ -290,7 +290,7 @@ Item {
 
                 color: Theme.lightDark(actionBar.backgroundColor, Theme.light.iconColor,
                                                                   Theme.dark.iconColor)
-                size: iconSource == "icon://content/add" ? Units.dp(27) : Units.dp(24)
+                size: Units.dp(24)
 
                 anchors.verticalCenter: parent ? parent.verticalCenter : undefined
             }

modules/Material/Icon.qml

@@ -48,7 +48,7 @@ Item {
 
        \sa name
       */
-    property string source: "icon://" + name
+    property string source: name ? "image://material/" + name : ""
 
     property bool valid: source.indexOf("icon://awesome/") == 0 
             ? awesomeIcon.valid : image.status == Image.Ready
@@ -58,31 +58,14 @@ Item {
     width: size
     height: size
 
-    property bool colorize: icon.source.indexOf("icon://") === 0 || icon.source.indexOf(".color.") === -1
+    property bool colorize: icon.source.indexOf("image://material/") === 0 || icon.source.indexOf(".color.") === -1
 
     Image {
         id: image
 
-        anchors.fill: parent
-        visible: source != "" && !colorize
-
-        source: {
-            if (icon.source.indexOf("icon://") == 0) {
-                var name = icon.source.substring(7)
-                var list = name.split("/");
-
-                if (name == "" || list[0] === "awesome")
-                    return "";
-                return Qt.resolvedUrl("icons/%1/%2.svg".arg(list[0]).arg(list[1]));
-            } else {
-                return icon.source
-            }
-        }
+        visible: !colorize
 
-        sourceSize {
-            width: size * Screen.devicePixelRatio
-            height: size * Screen.devicePixelRatio
-        }
+        source: icon.source
     }
 
     ColorOverlay {
@@ -95,26 +78,4 @@ Item {
         visible: image.source != "" && colorize
         opacity: icon.color.a
     }  
-
-    AwesomeIcon {
-        id: awesomeIcon
-
-        anchors.centerIn: parent
-        size: icon.size * 0.9
-        visible: name != ""
-        color: icon.color
-
-        name: {
-            if (icon.source.indexOf("icon://") == 0) {
-                var name = icon.source.substring(7)
-                var list = name.split("/")
-
-                if (list[0] === "awesome") {
-                    return list[1]
-                }
-            }
-
-            return ""
-        }
-    }
 }

modules/Material/IconButton.qml

@@ -30,7 +30,7 @@ Item {
 
     property Action action
     property string iconName
-    property string iconSource: action ? action.iconSource : "icon://" + iconName
+    property string iconSource: action ? action.iconSource : "image://material/" + iconName
     property bool hoverAnimation: action ? action.hoverAnimation : false
     property alias color: icon.color
     property alias size: icon.size

modules/Material/Tab.qml

@@ -43,6 +43,6 @@ Controls.Tab {
        \sa iconName
        \sa Icon
      */
-    property string iconSource: "icon://" + iconName
+    property string iconSource: iconName ? "image://material/" + iconName : ""
 }
 

modules/Material/TabBar.qml

@@ -153,14 +153,13 @@ Item {
                 Icon {
                     anchors.verticalCenter: parent.verticalCenter
 
-                    source: tabItem.tab.hasOwnProperty("iconSource")
-                            ? tabItem.tab.iconSource : tabItem.tab.hasOwnProperty("iconName")
-                            ? "icon://" + tabItem.tab.iconName : ""
+                    source: tabItem.tab.hasOwnProperty("iconSource") 
+                            ? tabItem.tab.iconSource : ""
                     color: tabItem.selected
                             ? darkBackground ? Theme.dark.iconColor : Theme.light.accentColor
                             : darkBackground ? Theme.dark.shade(tab.enabled ? 0.6 : 0.2) : Theme.light.shade(tab.enabled ? 0.6 : 0.2)
 
-                    visible: source != "" && source != "icon://"
+                    visible: source != ""
 
                     Behavior on color {
                         ColorAnimation { duration: 200 }

modules/Material/qmldir

@@ -1,4 +1,5 @@
 module Material
+plugin materialiconprovider
 Action 0.1 Action.qml
 ActionBar 0.1 ActionBar.qml
 ActionButton 0.1 ActionButton.qml

plugins/materialiconprovider.cpp

@@ -0,0 +1,65 @@
+/*
+ * QML Material - An application framework implementing Material Design.
+ * Copyright (C) 2015 Ricardo Vieira <[email protected]>
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Lesser General Public License as
+ * published by the Free Software Foundation, either version 2.1 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Lesser General Public License for more details.
+ *
+ * You should have received a copy of the GNU Lesser General Public License
+ * along with this program. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+#include <qqmlextensionplugin.h>
+
+#include <qqmlengine.h>
+#include <qquickimageprovider.h>
+#include <QImage>
+#include <QPainter>
+
+class MaterialIconProvider : public QQuickImageProvider
+{
+public:
+    MaterialIconProvider()
+        : QQuickImageProvider(QQuickImageProvider::Pixmap)
+    {
+    }
+
+    QPixmap requestPixmap(const QString &id, QSize *size, const QSize &requestedSize)
+    {
+        int width = 100;
+        int height = 50;
+        QImage icon = QImage("/lib/qt/qml/Material/icons/" + id + ".svg");
+
+        if (size)
+            *size = QSize(width, height);
+
+        return QPixmap::fromImage(icon);
+    }
+};
+
+class ImageProviderExtensionPlugin : public QQmlExtensionPlugin
+{
+    Q_OBJECT
+    Q_PLUGIN_METADATA(IID "Material")
+public:
+    void registerTypes(const char *uri)
+    {
+        Q_UNUSED(uri);
+    }
+
+    void initializeEngine(QQmlEngine *engine, const char *uri)
+    {
+        Q_UNUSED(uri);
+        engine->addImageProvider("material", new MaterialIconProvider);
+    }
+
+};
+
+#include "materialiconprovider.moc"

plugins/plugins.pro

@@ -0,0 +1,10 @@
+TEMPLATE = lib
+CONFIG += plugin
+QT += qml quick
+
+TARGET  = materialiconprovider
+
+SOURCES += materialiconprovider.cpp
+
+target.path = $$[QT_INSTALL_QML]/Material
+INSTALLS = target

qml-material.pro

@@ -1,4 +1,4 @@
 TEMPLATE = subdirs
-SUBDIRS = modules/Material modules/Material/Extras modules/QtQuick/Controls/Styles/Material tests
+SUBDIRS = modules/Material modules/Material/Extras modules/QtQuick/Controls/Styles/Material plugins tests
 
 OTHER_FILES = README.md CHANGELOG.md