Ticket #28504: 28504.panels.diff

src/wp-admin/css/customize-controls.css

@@ -145 +145 @@
         content: "\f141";
 }
 
+.control-section.control-panel > .accordion-section-title {
+        padding-left: 45px;
+}
+
+.control-section.control-panel > .accordion-section-title:before {
+        font: normal 20px/1 dashicons;
+        position: absolute;
+        top: 11px;
+        left: 14px;
+        -webkit-font-smoothing: antialiased;
+        -moz-osx-font-smoothing: grayscale;
+}
+
+/* Don't override custom icons, which get an additional class. */
+.control-section.control-panel > [class="accordion-section-title "]:before {
+        content: "\f111";
+}
+
+#accordion-panel-widgets > .accordion-section-title:before {
+        content: "\f116";
+}
+
+#accordion-panel-menus > .accordion-section-title:before {
+        content: "\f333";
+}
+
 .accordion-sub-container.control-panel-content {
         display: none;
         position: absolute;

src/wp-includes/class-wp-customize-section.php

@@ -215 +215 @@
          */
         public $sections;
 
+        /**
+         * Icon for the panel to show in UI.
+         *
+         * @since 4.0.0
+         * @access public
+         * @var string
+         */
+        public $icon = '';
+
         /**
          * Constructor.
          *
@@ -243 +252 @@
          */
         protected function render() {
                 ?>
-                <li id="accordion-section-<?php echo esc_attr( $this->id ); ?>" class="control-section control-panel accordion-section">
-                        <h3 class="accordion-section-title" tabindex="0">
+                <li id="accordion-panel-<?php echo esc_attr( $this->id ); ?>" class="control-section control-panel accordion-section">
+                        <h3 class="accordion-section-title <?php echo esc_attr( $this->icon ); ?>" tabindex="0">
                                 <?php echo esc_html( $this->title ); ?>
                                 <span class="screen-reader-text"><?php _e( 'Press return or enter to open panel' ); ?></span>
                         </h3>