add unicode support to ui_list icon as optional icon_unicode

Author: Dave Conway-Jones

node-red-node-ui-list/README.md

@@ -26,6 +26,7 @@ An array of Items is passed in by `msg.payload`.  It consists of objects contain
 - `description` - description of the item. optional if line type is `Single-line ` or action type is `menu`,
 - `icon` - URL of icon (optional),
 - `icon_name` - Font Awesome 4.7 icon name (optional),
+- `icon_unicode` - text to use as icon - useful for unicode symbols like flags, etc (optional).
 - `menu` - list of menu items (optional).
 
 If you just need a simple text list then `msg.payload` can be a simple array of strings, e.g. `["Item1","Item2","Item3"]`
@@ -42,7 +43,9 @@ An action to be taken for a displayed item can be selected by the `Action` selec
 
 If `Allow HTML in displayed text` checkbox is selected, HTML tags can be used in `title` and `description`.
 
-Icon can be specified by `icon` or `icon_name` property.  `icon` specifies URL of icon image.  If `icon` is `null`, blank icon is displayed. `icon_name` specifies an icon name of Font Awesome 4.7 icons (e.g. `fa-home`). `icon` has precedence over `icon_name`.
+Icon can be specified by `icon` or `icon_name` property.  `icon` specifies URL of icon image.  If `icon` is `null`, blank icon is displayed. `icon_name` specifies an icon name of Font Awesome 4.7 icons (e.g. `fa-home`). 
+`icon_unicode` specifies text character to use as an icon, useful for displaying unicode symbols like flags, etc.
+`icon` has precedence over `icon_name` and `icon_unicode`.
 
 Example
 -------

node-red-node-ui-list/locales/en-US/ui_list.html

@@ -11,6 +11,7 @@ <h3>Inputs</h3>
                 <li><b>menu</b> - list of menu items (optional),</li>
                 <li><b>icon</b> - URL of icon (optional),</li>
                 <li><b>icon_name</b> - font icon name (optional).</li>
+                <li><b>icon_unicode</b> - alternative to icon name - uses text characters (optional).</li>
                 <li><b>isChecked</b> - boolean, set the item checked or on (optional).</li>
             </ul>
         </dd>
@@ -37,5 +38,6 @@ <h3>Details</h3>
     </ul>
     <p>If <b>Allow HTML in displayed text</b> checkbox is selected, HTML tags can be used in the <code>title</code> and <code>description</code>.</p>
     <p>Icon can be specified by <code>icon</code> or <code>icon_name</code> propeety.  <code>icon</code> specifies URL of icon file.  If <code>icon</code> is <code>null</code>, blank icon is displayed.
-    <code>icon_name</code> specifies icon name of font icons. <code>icon</code> has precedence over <code>icon_name</code>.</p>
+    <code>icon_name</code> specifies icon name of font icons. <code>icon_unicode</code> specifies text to use as an icon - useful for unicode symbols like flags, etc. 
+    <code>icon</code> has precedence over <code>icon_name</code> and <code>icon_unicode</code>.</p>
 </script>

node-red-node-ui-list/package.json

@@ -1,6 +1,6 @@
 {
     "name": "node-red-node-ui-list",
-    "version": "0.2.5",
+    "version": "0.3.0",
     "description": "Node-RED Dashboard UI widget node for simple list",
     "author": "Hiroyasu Nishiyama",
     "contributors": [

node-red-node-ui-list/ui_list.js

@@ -58,7 +58,8 @@ module.exports = function(RED) {
         var icon = String.raw`
         <img src="{{item.icon}}" class="md-avatar" ng-if="(item.icon !== undefined) && (item.icon !== null)">
         <md-icon aria-label="{{item.desc}}" ng-if="(item.icon === undefined) && (item.icon_name !== undefined)"><ui-icon icon="{{item.icon_name}}"></ui-icon></md-icon>
-        <md-icon class="md-avatar-icon" aria-label="{{item.desc}}" ng-if="(item.icon === null) && (item.icon_name === undefined)"></md-icon>
+        <span class="md-avatar" style="font-size:x-large; height:unset;" ng-if="(item.icon === undefined) && (item.icon_unicode !== undefined)"><h1>{{item.icon_unicode}}</h1></span>
+        <md-icon class="md-avatar-icon" aria-label="{{item.desc}}" ng-if="(item.icon === null) && (item.icon_name === undefined) && (item.icon_unicode === undefined)"></md-icon>
 `;
         var body = null;
         if (line_type === "one") {