Add support for Ionicons (symbols) to <l:Icon> and <l:task> components

core/src/main/java/hudson/AboutJenkins.java

@@ -18,7 +18,7 @@
 public class AboutJenkins extends ManagementLink {
     @Override
     public String getIconFileName() {
-        return "help.png";
+        return "symbol-help-circle";
     }
 
     @Override

core/src/main/java/hudson/Functions.java

@@ -161,6 +161,7 @@
 import org.apache.commons.jexl.parser.ASTSizeFunction;
 import org.apache.commons.jexl.util.Introspector;
 import org.apache.commons.lang.StringUtils;
+import org.jenkins.ui.icon.Icon;
 import org.jenkins.ui.icon.IconSet;
 import org.jvnet.tiger_types.Types;
 import org.kohsuke.accmod.Restricted;
@@ -2289,4 +2290,49 @@ public static boolean isContextMenuVisible(Action a) {
             return true;
         }
     }
+
+    public static Icon tryGetIcon(String iconGuess, JellyContext context) {
+        if (iconGuess.startsWith("symbol-")) {
+            return null;
+        }
+
+        StaplerRequest currentRequest = Stapler.getCurrentRequest();
+        currentRequest.getWebApp().getDispatchValidator().allowDispatch(currentRequest, Stapler.getCurrentResponse());
+        String rootURL = currentRequest.getContextPath();
+        Icon iconMetadata = IconSet.icons.getIconByClassSpec(iconGuess);
+
+        if (iconMetadata == null) {
+            // Icon could be provided as a simple iconFileName e.g. "settings.png"
+            iconMetadata = IconSet.icons.getIconByClassSpec(IconSet.toNormalizedIconNameClass(iconGuess) + " icon-md");
+        }
+
+        if (iconMetadata == null) {
+            // Icon could be provided as an absolute iconFileName e.g. "/plugin/foo/abc.png"
+            iconMetadata = IconSet.icons.getIconByUrl(iconGuess);
+        }
+
+        return iconMetadata;
+    }
+
+    public static String tryGetIconPath(String iconGuess, JellyContext context) {
+        if (iconGuess.startsWith("symbol-")) {
+            return iconGuess;
+        }
+
+        StaplerRequest currentRequest = Stapler.getCurrentRequest();
+        currentRequest.getWebApp().getDispatchValidator().allowDispatch(currentRequest, Stapler.getCurrentResponse());
+        String rootURL = currentRequest.getContextPath();
+        Icon iconMetadata = tryGetIcon(iconGuess, context);
+        String iconSource = null;
+
+        if (iconMetadata != null) {
+            iconSource = iconMetadata.getQualifiedUrl(context);
+        }
+
+        if (iconMetadata == null) {
+            iconSource = rootURL + (iconGuess.startsWith("/images/") || iconGuess.startsWith("/plugin/") ? getResourcePath() : "") + getResourcePath() + iconGuess;
+        }
+
+        return iconSource;
+    }
 }

core/src/main/java/hudson/model/ManageJenkinsAction.java

@@ -38,7 +38,7 @@ public class ManageJenkinsAction implements RootAction {
     @Override
     public String getIconFileName() {
         if (Jenkins.get().hasAnyPermission(Jenkins.MANAGE, Jenkins.SYSTEM_READ))
-            return "gear.png";
+            return "symbol-settings";
         else
             return null;
     }

core/src/main/java/jenkins/management/ConfigureLink.java

@@ -39,7 +39,7 @@ public class ConfigureLink extends ManagementLink {
 
     @Override
     public String getIconFileName() {
-        return "gear2.png";
+        return "symbol-settings";
     }
 
     @Override

core/src/main/java/jenkins/model/ModelObjectWithContextMenu.java

@@ -133,6 +133,18 @@ public ContextMenu add(String url, String icon, String text, boolean post, boole
             return this;
         }
 
+        /** @since TODO */
+        public ContextMenu add(String url, String icon, String iconXml, String text, boolean post, boolean requiresConfirmation) {
+            if (text != null && icon != null && url != null) {
+                MenuItem item = new MenuItem(url, icon, text);
+                item.iconXml = iconXml;
+                item.post = post;
+                item.requiresConfirmation = requiresConfirmation;
+                items.add(item);
+            }
+            return this;
+        }
+
         /**
          * Add a header row (no icon, no URL, rendered in header style).
          *
@@ -268,6 +280,13 @@ class MenuItem {
         @SuppressFBWarnings(value = "URF_UNREAD_PUBLIC_OR_PROTECTED_FIELD", justification = "read by Stapler")
         public String icon;
 
+        /**
+         * Optional icon XML, if set it's used instead of @icon for the menu item
+         */
+        @Exported
+        @SuppressFBWarnings(value = "URF_UNREAD_PUBLIC_OR_PROTECTED_FIELD", justification = "read by Stapler")
+        public String iconXml;
+
         /**
          * True to make a POST request rather than GET.
          * @since 1.504

core/src/main/java/org/jenkins/ui/icon/IconSet.java

@@ -35,6 +35,8 @@
 import org.apache.commons.io.IOUtils;
 import org.apache.commons.jelly.JellyContext;
 import org.apache.commons.lang.StringUtils;
+import org.kohsuke.accmod.Restricted;
+import org.kohsuke.accmod.restrictions.NoExternalUse;
 
 /**
  * An icon set.
@@ -45,7 +47,7 @@ public class IconSet {
 
 
     public static final IconSet icons = new IconSet();
-    private static final Map<String, String> IONICONS = new ConcurrentHashMap<>();
+    private static final Map<String, String> SYMBOLS = new ConcurrentHashMap<>();
 
     private Map<String, Icon> iconsByCSSSelector = new ConcurrentHashMap<>();
     private Map<String, Icon> iconsByUrl  = new ConcurrentHashMap<>();
@@ -73,34 +75,36 @@ private static String prependTitleIfRequired(String icon, String title) {
         return icon;
     }
 
-    public static String getIonicon(String name, String title) {
-        if (IONICONS.containsKey(name)) {
-            String icon = IONICONS.get(name);
-            return prependTitleIfRequired(icon, title);
+    // for Jelly
+    @Restricted(NoExternalUse.class)
+    public static String getSymbol(String name, String title) {
+        if (SYMBOLS.containsKey(name)) {
+            String symbol = SYMBOLS.get(name);
+            return prependTitleIfRequired(symbol, title);
         }
 
-        // Load icon if it exists
-        InputStream inputStream = IconSet.class.getResourceAsStream("/images/ionicons/" + name + ".svg");
-        String ionicon = null;
+        // Load symbol if it exists
+        InputStream inputStream = IconSet.class.getResourceAsStream("/images/symbols/" + name + ".svg");
+        String symbol = null;
 
         try {
             if (inputStream != null) {
-                ionicon = IOUtils.toString(inputStream, StandardCharsets.UTF_8);
+                symbol = IOUtils.toString(inputStream, StandardCharsets.UTF_8);
             }
         } catch (IOException e) {
             // ignored
         }
-        if (ionicon == null) {
-            ionicon = PLACEHOLDER_SVG;
+        if (symbol == null) {
+            symbol = PLACEHOLDER_SVG;
         }
 
-        ionicon = ionicon.replaceAll("(<title>)[^&]*(</title>)", "$1$2");
-        ionicon = ionicon.replaceAll("<svg", "<svg aria-hidden=\"true\"");
-        ionicon = ionicon.replace("stroke:#000", "stroke:currentColor");
+        symbol = symbol.replaceAll("(<title>)[^&]*(</title>)", "$1$2");
+        symbol = symbol.replaceAll("<svg", "<svg aria-hidden=\"true\"");
+        symbol = symbol.replace("stroke:#000", "stroke:currentColor");
 
-        IONICONS.put(name, ionicon);
+        SYMBOLS.put(name, symbol);
 
-        return prependTitleIfRequired(ionicon, title);
+        return prependTitleIfRequired(symbol, title);
     }
 
     public IconSet addIcon(Icon icon) {
@@ -517,24 +521,11 @@ private static void initializeSVGs() {
         images.add("warning");
         images.add("document-properties");
 
-        Map<String, String> materialIcons = new HashMap<>();
-        materialIcons.put("help", "svg-sprite-action-symbol.svg#ic_help_24px");
-
         for (Map.Entry<String, String> size : sizes.entrySet()) {
             for (String image : images) {
                 icons.addIcon(new Icon("icon-" + image + " " + size.getKey(),
                         "svgs/" + image + ".svg", size.getValue()));
             }
-
-            for (Map.Entry<String, String> imageEntry : materialIcons.entrySet()) {
-                icons.addIcon(new Icon(
-                        "icon-" + imageEntry.getKey() + " " + size.getKey(),
-                                "material-icons/" + imageEntry.getValue(),
-                                size.getValue(),
-                                IconFormat.EXTERNAL_SVG_SPRITE
-                        )
-                );
-            }
         }
     }
 }

core/src/main/resources/hudson/PluginManager/available.jelly

@@ -39,7 +39,7 @@ THE SOFTWARE.
           value="${request.getParameter('filter')}"
           placeholder="${%Search}"/>
         <div class="jenkins-search__icon">
-          <l:ionicon name="search-outline"/>
+          <l:symbol name="search"/>
         </div>
       </div>
     </l:app-bar>

core/src/main/resources/hudson/PluginManager/installed.jelly

@@ -39,7 +39,7 @@ THE SOFTWARE.
           value="${request.getParameter('filter')}"
           placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
         <div class="jenkins-search__icon">
-          <l:ionicon name="search-outline"/>
+          <l:symbol name="search"/>
         </div>
       </div>
     </l:app-bar>
@@ -180,7 +180,7 @@ THE SOFTWARE.
                           <form class="jenkins-buttons-row" method="post"
                                 action="${rootURL}/updateCenter/plugin/${p.shortName}/downgrade">
                             <button class="jenkins-table__button  jenkins-table__button--orange" tooltip="${%downgradeTo(p.backupVersion)}">
-                              <l:ionicon name="downgrade-circle-outline"/>
+                              <l:symbol name="downgrade-circle"/>
                               <span class="jenkins-!-margin-left-1"
                                     style="font-size: 0.75rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 50px;">
                                 ${p.backupVersion}
@@ -226,7 +226,7 @@ THE SOFTWARE.
                             </j:if>
                             <form class="jenkins-buttons-row" method="post" action="plugin/${p.shortName}/uninstall">
                               <button class="jenkins-table__button jenkins-table__button--red uninstall" tooltip="${%Uninstall} ${p.updateInfo.displayName?:p.displayName}">
-                                <l:ionicon name="close-circle-outline"/>
+                                <l:symbol name="close-circle"/>
                               </button>
                             </form>
                           </j:otherwise>

core/src/main/resources/hudson/PluginManager/table.jelly

@@ -46,7 +46,7 @@ THE SOFTWARE.
           value="${request.getParameter('filter')}"
           placeholder="${filtered == 'true' ? '%Search' : '%Filter'}"/>
         <div class="jenkins-search__icon">
-          <l:ionicon name="search-outline"/>
+          <l:symbol name="search"/>
         </div>
       </div>
     </l:app-bar>

core/src/main/resources/hudson/logging/LogRecorder/sidepanel.jelly

@@ -33,9 +33,9 @@ THE SOFTWARE.
       <l:task href=".." icon="icon-up icon-md" title="${%Back to Loggers}"/>
       <l:task href="." icon="icon-notepad icon-md" title="${%Log records}"/>
       <l:isAdmin>
-        <l:task href="configure" icon="icon-gear icon-md" title="${%Configure}"/>
+        <l:task href="configure" icon="symbol-settings" title="${%Configure}"/>
         <l:task href="delete" icon="icon-edit-delete icon-md" title="${%Delete}"/>
       </l:isAdmin>
     </l:tasks>
   </l:side-panel>
-</j:jelly>
+</j:jelly>

core/src/main/resources/hudson/logging/LogRecorderManager/index.jelly

@@ -64,7 +64,7 @@ THE SOFTWARE.
             <l:isAdmin>
               <div class="jenkins-table__cell__button-wrapper">
                 <a href="${rootURL}/${c.url}configure" class="jenkins-table__button">
-                  <l:ionicon name="settings-outline" />
+                  <l:symbol name="settings" />
                 </a>
               </div>
             </l:isAdmin>

core/src/main/resources/hudson/logging/LogRecorderManager/sidepanel.jelly

@@ -31,14 +31,14 @@ THE SOFTWARE.
   <l:side-panel>
     <l:tasks>
       <l:task href="${rootURL}/" icon="icon-up icon-md" title="${%Back to Dashboard}"/>
-      <l:task href="${rootURL}/manage" icon="icon-gear icon-md" title="${%Manage Jenkins}"/>
+      <l:task href="${rootURL}/manage" icon="symbol-settings" title="${%Manage Jenkins}"/>
       <l:task href="." icon="icon-clipboard icon-md" title="${%Log Recorders}">
         <l:isAdmin>
           <l:task href="new" icon="icon-new-package icon-md" title="${%New Log Recorder}"/>
         </l:isAdmin>
       </l:task>
       <l:task href="all" icon="icon-notepad icon-md" title="${%All Log Messages}"/>
-      <l:task href="levels" icon="icon-gear icon-md" title="${%Log Levels}"/>
+      <l:task href="levels" icon="symbol-settings" title="${%Log Levels}"/>
     </l:tasks>
   </l:side-panel>
 </j:jelly>

core/src/main/resources/hudson/model/AbstractBuild/tasks.jelly

@@ -31,5 +31,5 @@ THE SOFTWARE.
       <l:task contextMenu="false" href="${buildUrl.baseUrl}/" icon="icon-search icon-md" title="${%Status}"/>
       <l:task href="${buildUrl.baseUrl}/changes" icon="icon-notepad icon-md" title="${%Changes}"/>
       <p:console-link/>
-      <l:task href="${buildUrl.baseUrl}/configure" icon="icon-notepad icon-md" title="${h.hasPermission(it,it.UPDATE)?'%Edit Build Information':'%View Build Information'}"/>
-</j:jelly>
+      <l:task href="${buildUrl.baseUrl}/configure" icon="symbol-settings" title="${h.hasPermission(it,it.UPDATE)?'%Edit Build Information':'%View Build Information'}"/>
+</j:jelly>

core/src/main/resources/hudson/model/ComputerSet/index.jelly

@@ -85,7 +85,7 @@ THE SOFTWARE.
             <j:if test="${c.hasPermission(c.EXTENDED_READ)}">
               <div class="jenkins-table__cell__button-wrapper">
                 <a href="${rootURL}/${c.url}configure" class="jenkins-table__button">
-                  <l:ionicon name="settings-outline" />
+                  <l:symbol name="settings" />
                 </a>
               </div>
             </j:if>

core/src/main/resources/hudson/model/ComputerSet/sidepanel.jelly

@@ -32,11 +32,11 @@ THE SOFTWARE.
     <j:getStatic var="createPermission" className="hudson.model.Computer" field="CREATE"/>
     <l:tasks>
       <l:task href="${rootURL}/" icon="icon-up icon-md" title="${%Back to Dashboard}"/>
-      <l:task href="${rootURL}/manage" icon="icon-gear icon-md" permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%Manage Jenkins}"/>
+      <l:task href="${rootURL}/manage" icon="symbol-settings" permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%Manage Jenkins}"/>
       <l:task href="new" icon="icon-new-computer icon-md" permission="${createPermission}" title="${%New Node}"/>
       <l:task href="${rootURL}/configureClouds" icon="icon-health-40to59 icon-md" permission="${app.SYSTEM_READ}"
               title="${app.hasPermission(app.ADMINISTER) ? '%Configure Clouds' : '%View Clouds'}"/>
-      <l:task href="configure" icon="icon-gear icon-md" permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%Node Monitoring}"/>
+      <l:task href="configure" icon="symbol-settings" permissions="${app.MANAGE_AND_SYSTEM_READ}" title="${%Node Monitoring}"/>
     </l:tasks>
     <t:queue items="${app.queue.items}" />
     <t:executors />

core/src/main/resources/hudson/model/Label/sidepanel.jelly

@@ -34,10 +34,10 @@ THE SOFTWARE.
       <l:task contextMenu="false" href="${rootURL}/" icon="icon-up icon-md" title="${%Back to Dashboard}"/>
       <l:task contextMenu="false" href="${url}" icon="icon-attribute icon-md" title="${%Overview}"/>
       <j:if test="${it.atom}">
-        <l:task href="${url}/configure" icon="icon-gear icon-md" title="${%Configure}" permission="${app.ADMINISTER}" />
+        <l:task href="${url}/configure" icon="symbol-settings" title="${%Configure}" permission="${app.ADMINISTER}" />
       </j:if>
       <l:task href="${url}/load-statistics" icon="icon-monitor icon-md" title="${%Load Statistics}"/>
       <st:include page="actions.jelly" />
     </l:tasks>
   </l:side-panel>
-</j:jelly>
+</j:jelly>

core/src/main/resources/hudson/model/UpdateCenter/sidepanel.jelly

@@ -31,7 +31,7 @@ THE SOFTWARE.
   <l:side-panel>
     <l:tasks>
       <l:task href="${rootURL}/" icon="icon-up icon-md" title="${%Back to Dashboard}"/>
-      <l:task href="${rootURL}/manage" icon="icon-gear icon-md" title="${%Manage Jenkins}"/>
+      <l:task href="${rootURL}/manage" icon="symbol-settings" title="${%Manage Jenkins}"/>
       <l:task href="${rootURL}/pluginManager/" icon="icon-plugin icon-lg" title="${%Manage Plugins}"/>
     </l:tasks>
   </l:side-panel>

core/src/main/resources/hudson/model/User/sidepanel.jelly

@@ -34,7 +34,7 @@ THE SOFTWARE.
       <l:task contextMenu="false" href="${rootURL}/asynchPeople/" icon="icon-up icon-md" title="${%People}"/>
       <l:task contextMenu="false" href="${rootURL}/${it.url}/" icon="icon-search icon-md" title="${%Status}"/>
       <l:task href="${rootURL}/${it.url}/builds" icon="icon-notepad icon-md" title="${%Builds}"/>
-      <l:task href="${rootURL}/${it.url}/configure" icon="icon-gear icon-md" permission="${app.ADMINISTER}" title="${%Configure}"/>
+      <l:task href="${rootURL}/${it.url}/configure" icon="symbol-settings" permission="${app.ADMINISTER}" title="${%Configure}"/>
       <t:actions actions="${it.propertyActions}"/>
       <t:actions actions="${it.transientActions}"/>
       <j:if test="${it.canDelete()}">

core/src/main/resources/hudson/model/View/AsynchPeople/index.jelly

@@ -43,8 +43,8 @@ THE SOFTWARE.
       <l:progressiveRendering handler="${it}" callback="display"/>
 
       <!-- cloned from JS -->
-      <span id="person-circle-outline" class="default-hidden">
-        <l:ionicon name="person-circle-outline" />
+      <span id="person-circle" class="default-hidden">
+        <l:symbol name="person-circle" />
       </span>
 
       <table class="jenkins-table ${iconSize == '16x16' ? 'jenkins-table--small' : iconSize == '24x24' ? 'jenkins-table--medium' : ''} sortable" id="people">

core/src/main/resources/hudson/model/View/sidepanel.jelly

@@ -54,7 +54,7 @@ THE SOFTWARE.
       <l:task href="${rootURL}/${it.viewUrl}builds" icon="icon-notepad icon-md" title="${%Build History}"/>
       <j:if test="${it.isEditable()}">
         <!-- /configure URL on Jenkins object is overloaded with Jenkins's system config, so always use the explicit name. -->
-        <l:task href="${rootURL}/${it.viewUrl}configure" icon="icon-gear icon-md" permission="${it.CONFIGURE}" title="${%Edit View}"/>
+        <l:task href="${rootURL}/${it.viewUrl}configure" icon="symbol-settings" permission="${it.CONFIGURE}" title="${%Edit View}"/>
       </j:if>
       <j:if test="${it.owner.canDelete(it)}">
         <l:task href="delete" icon="icon-edit-delete icon-md" permission="${it.DELETE}" title="${%Delete View}"/>

core/src/main/resources/hudson/security/HudsonPrivateSecurityRealm/index.jelly

@@ -65,15 +65,15 @@ THE SOFTWARE.
               <td>
                 <div class="jenkins-table__cell__button-wrapper">
                   <a href="${user.url}/configure" class="jenkins-table__button">
-                    <l:ionicon name="settings-outline" />
+                    <l:symbol name="settings" />
                   </a>
                 </div>
               </td>
               <td>
                 <j:if test="${user.canDelete()}">
                   <div class="jenkins-table__cell__button-wrapper">
                     <a href="${user.url}/delete" class="jenkins-table__button jenkins-table__button--red">
-                      <l:ionicon name="trash-outline" />
+                      <l:symbol name="trash" />
                     </a>
                   </div>
                 </j:if>