¿Cómo agrego un ícono a un nuevo elemento de la barra de administración?

Tengo una función que agrega elementos a la barra de herramientas de WordPress. Por ejemplo:

$args2 = array(
    'id'    => 'conversations_unread',
    'title' => $visitor['conversations_unread'] . ' &nbsp ',
    'href'  => XenForo_Application::get('options')->boardUrl . '/conversations'
);

¿Cómo obtengo un ícono a la izquierda de este nuevo elemento?

Intenté usar el 'meta' pero el ícono no aparece.

'meta' => array( 'class' => 'ib-icon' ),

Leí una referencia para agregar la imagen al 'título', pero me gustaría que este icono sea como la burbuja de comentarios.

Ejemplo completo

Un complemento rápido (mu-) como ejemplo:

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'parent' => null,
        'group'  => null,
        'title'  => __( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Hello', 'some-textdomain' ),
            'html'     => '<p>Hello</p>',
            'class'    => 'wpse--item',
            'rel'      => 'friend',
            'onclick'  => "alert('Hello');",
            'tabindex' => PHP_INT_MAX,
        ),
    ) );
} );

Lo que hace que el siguiente HTML sea el primer elemento (y, por lo tanto, también hace que nuestra barra de administración sea inútil, pero ese no es el punto de este ejemplo):

<li id="wp-admin-bar-wpse" class="wpse--item">
    <a class="ab-item" tabindex="9223372036854775807" href="http://astro.dev/wp-admin/profile.php" onclick="alert(\'Hello\');" target="_self" title="Hello" rel="friend">Example</a>
    <p>Hello</p>
</li>

Ahora que tenemos una base, podemos preocuparnos por ...

Agregar iconos

La triste noticia: no hay una manera fácil de hacerlo. Al menos no sin agregar su propia hoja de estilo. Como puede leer (en el código), están sucediendo algunas cosas: antepuse el HTML necesario para ajustar un Dashicon antes del elemento real. Luego agregué un número entero muy alto como último número a la acción; eso es lo que decide la posición del elemento en la barra de administración.

<?php
/** Plugin Name: Add Admin Bar Icon */
add_action( 'admin_bar_menu', function( \WP_Admin_Bar $bar )
{
    $bar->add_menu( array(
        'id'     => 'wpse',
        'title'  => '<span class="ab-icon"></span>'.__( 'Example', 'some-textdomain' ),
        'href'   => get_edit_profile_url( get_current_user_id() ),
        'meta'   => array(
            'target'   => '_self',
            'title'    => __( 'Ahoi!', 'some-textdomain' ),
            'html'     => '<!-- Custom HTML that goes below the item -->',
        ),
    ) );
}, 210 ); // <-- THIS INTEGER DECIDES WHERE THE ITEM GETS ADDED (Low = left, High = right)

add_action( 'wp_enqueue_scripts', function()
{
    wp_enqueue_style( /* register your stylesheet */ );
}

Finalmente, deberá agregar algunas reglas CSS en su propia hoja de estilo. La única parte móvil es wpseen el #/id. El resto es constante e igual para todos los elementos / nodos de la barra de administración. Es posible que también deba ajustar la topposición para que se ajuste al Dashicon. Simplemente elija un Dashicon de su sitio y agregue el fXXXcódigo en el CSS a continuación.

#wpadminbar #wp-admin-bar-wpse .ab-icon:before {
    content: '\f306';
    top: 3px;
}

para ampliar la respuesta de Kaiser, también puede anular el icono con una URL de imagen personalizada y poner los estilos en línea (o de nuevo por separado si lo desea), por ejemplo. un icono de 22 px x 22 px ...

$iconurl = '/images/custom-icon.png';

$iconspan = '<span class="custom-icon" style="
    float:left; width:22px !important; height:22px !important;
    margin-left: 5px !important; margin-top: 5px !important;
    background-image:url(\''.$iconurl.'\');"></span>';

$title = __( 'Example', 'some-textdomain' ),

luego use para el valor del título:

'title' => $iconspan.$title,