---
title: "WordPress Icon-Block um eigene Sammlungen erweitern"
url: "https://webentwicklerin.at/blog/wordpress-icon-block-um-eigene-sammlungen-erweitern/"
datePublished: "2026-08-18T21:28:00+00:00"
dateModified: "2026-08-19T08:33:57+00:00"
author: Gabriele Lässer
lang: de
canonical: "https://webentwicklerin.at/blog/wordpress-icon-block-um-eigene-sammlungen-erweitern/"
markdown: "https://webentwicklerin.at/ai/post/wordpress-icon-block-um-eigene-sammlungen-erweitern.md"
tags: WordPress 7.1
categories: "Block-Editor, Hooks und Filter"
image: "https://webentwicklerin.at/wp-content/uploads/2019/07/z03_5684-scaled.jpg"
---

Inhalt

Mit WordPress 7 kam er - endlich - der Core/Iconblock. Doch so richtig Freude wollte bei mir darüber noch nicht aufkommen, war die Icon-Auswahl doch sehr begrenzt. Was man suchte, war da oft nicht. Also griff ich auf einen alternativen Icon Block zurück, den ich selbst befüllte und erweiterte. Das ist mit WordPress Version 7.1, die morgen veröffentlicht werden soll, nicht mehr erforderlich. In einer Vorversion konnte ich die Erweiterung des Iconblocks durch eigene Icons bereits testen.

## Die Registrierungen

Es gibt zwei Registrierungen, die durchgeführt werden müssen. Einmal ist es die Sammlung (man kann also mehrere Sammlungen von Icons verwenden), wp_register_icon_collection(). Sobald eine Sammlung registriert ist, können ihr dann einzelne Icons, wp_register_icon() zugeordnet werden.

```
wp_register_icon_collection( string $slug, array $args );
```

Die Funktion hat zwei Parameter, an die du deine Argumente übergeben musst:

- $slug: Ein eindeutiger Schlüssel für dein Plugin für deine Sammlung. Idealerweise wird diesem dein Plugin-/Theme-Name vorangestellt (z. B. plugin-collection).
- $args: Ein Array mit Argumenten für die Sammlung:
  - label: Eine für Menschen lesbare und internationalisierte Bezeichnung für die Sammlung, die in der Benutzeroberfläche verwendet wird.
  - description: Eine internationalisierte Zeichenfolge, die die Sammlung beschreibt.

```
wp_register_icon( string $icon_name, array $icon_properties );
```

Diese Funktion hat ebenfalls zwei Parameter:

- $icon_name: Ein Bezeichner für ein Icon im Namespace der Sammlung. Er muss mit einem Sammlung-Slug beginnen, gefolgt von einem / (z. B. plugin-collection/icon-slug).
- $icon_properties: Ein Array mit Argumenten zur Definition des Symbols:
  - label: Eine internationalisierte, für Menschen lesbare Bezeichnung für das Symbol.
  - content: Der SVG-Code für das Symbol (optional).
  - file_path: Ein Dateipfad zum SVG-Code für das Symbol (optional).

Sowohl content als auch file_path sind für sich genommen optional. Einer von beiden muss befüllt sein, damit du später ein Icon bekommst. content bedeutet, der SVG-Code wird direkt verwendet, wohingegen im file_path der Pfad zur SVG-Datei definiert wird.

Die Registrierung der Sammlungen und Icons erfolgt über den Init-Hook, entweder in der function.php deines (eigenen) Themes, oder über ein selbst geschriebenes Plugin.

## Der Hook

```
add_action('init', 'we_icon_collection_register');
```

```
function we_icon_collection_register() 
{
    wp_register_icon_collection(
        'weicons',
        [
            'label'       => __('WE Icons', 'we-icon-collection'),
            'description' => __('SVG icons for the WordPress Icon block.', 'we-icon-collection'),
        ]
    );

    wp_register_icon(
        'weicons/' . $slug,
        [
            'label'     => __('My first Icon', 'mytextdomain'),
            'file_path' => '/assets/svg/we-icon.svg',
        ]
    );
}
```

## Voraussetzungen um ein Icon zu verwenden

Für deine eigene Collection in WordPress 7.1 müssen die Icons vor allem mit der Sanitization und der Icon API kompatibel sein.

- Jedes Icon braucht eine eindeutige Collection-Zuordnung und einen eindeutigen Slug, z. B. weicons/star-fill.
- Je Icon muss WordPress entweder SVG-Markup (content) oder einen Pfad zu einer SVG-Datei (file_path) bekommen.
- Die SVGs sollten möglichst einfarbig und fill-basiert sein. stroke wird in WordPress 7.1 derzeit entfernt, daher sind Outline-/Stroke-Icons ungeeignet.
- Sicher sind vor allem SVGs, die nur diese Elemente verwenden: svg, path, polygon.
- Alles mit zusätzlichen Elementen wie title, defs, clipPath, mask, rect, circle, ellipse, polyline, line, text, style, linearGradient, radialGradient, image, use usw. ist riskant oder wird teilweise sogar entfernt.
- Das äußere <svg> sollte ein brauchbares viewBox haben. width/height sind unkritisch, aber wichtiger ist viewBox, damit das Icon korrekt skaliert.
- Die Dateien sollten kein eingebettetes CSS oder Skript enthalten.
- Für die Editor-Nutzung ist es hilfreich, wenn Dateinamen von sich aus als Slugs taugen, also etwa star-fill.svg, pin-map-fill.svg.

## Umsetzung in einem Plugin

Für den Schnelltest habe ich eine willkürliche SVG-Icon Sammlung angelegt, und diese im Pluginordner we-icon-collection unter assets/svg abgelegt.

![](https://webentwicklerin.at/wp-content/uploads/2026/08/grafik-8.png)

```
<?php

/**
 * Plugin Name:       WE Icon Collection
 * Plugin URI:        https://webentwicklerin.at
 * Description:       Registers the WE Icons collection for the WordPress Icon block.
 * Version:           1.0.0
 * Requires at least: 7.1
 * Requires PHP:      8.0
 * Author:            webentwicklerin, Gabriele Laesser
 * Author URI:        https://webentwicklerin.at
 * License:           GPL-2.0-or-later
 * License URI:       https://www.gnu.org/licenses/gpl-2.0.html
 * Text Domain:       we-icon-collection
 *
 * @package Webentwicklerin\WeIconCollection
 */

declare(strict_types=1);

namespace Webentwicklerin\WeIconCollection;

const ALLOWED_ICON_SLUGS = array(
	'arrow-down',
	'arrow-left',
	'arrow-right',
	'arrow-up',
	'balloon-fill',
	'balloon-heart-fill',
	'bandaid-fill',
	'basket-fill',
	'bug-fill',
	'bus-front-fill',
	'camera2',
	'chat-dots-fill',
	'clock-fill',
	'cloud-upload-fill',
	'database-fill',
	'diagram-3-fill',
	'envelope-fill',
	'envelope-open-fill',
	'eraser-fill',
	'eye-fill',
	'file-pdf',
	'grid-3x2-gap-fill',
	'grid-3x3-gap-fill',
	'hourglass-split',
	'house-fill',
	'house-gear-fill',
	'incognito',
	'kanban-fill',
	'key-fill',
	'leaf-fill',
	'lightbulb-fill',
	'linkedin',
	'link',
	'link-website',
	'lock-fill',
	'megaphone-fill',
	'menu',
	'mouse3-fill',
	'pen-fill',
	'people-fill',
	'person-heart',
	'person-raised-hand',
	'phone-vibrate-fill',
	'pin-fill',
	'pin-map-fill',
	'rocket-takeoff-fill',
	'shield-fill-check',
	'shield-lock-fill',
	'sign-dead-end-fill',
	'sign-do-not-enter-fill',
	'speedometer',
	'stack',
	'star-fill',
	'telephone-fill',
	'tools',
	'translated',
	'umbrella-fill',
	'virus',
	'wallet-fill',
	'wordpress',
	'wrench-adjustable',
);

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}

add_action( 'init', __NAMESPACE__ . '\\register_icons' );

/**
 * Register the WE Icons collection and each shipped SVG icon.
 */
function register_icons(): void
{
	if ( ! function_exists( 'wp_register_icon_collection' ) ) {
		return;
	}

	wp_register_icon_collection(
		'weicons',
		array(
			'label'       => __( 'WE Icons', 'we-icon-collection' ),
			'description' => __( 'Fill-based SVG icons for the WordPress Icon block.', 'we-icon-collection' ),
		)
	);

	foreach ( ALLOWED_ICON_SLUGS as $slug ) {
		$file_path = __DIR__ . '/assets/svg/' . $slug . '.svg';

		if ( ! file_exists( $file_path ) ) {
			continue;
		}

		$label = ucwords( str_replace( '-', ' ', $slug ) );

		wp_register_icon(
			'weicons/' . $slug,
			array(
				'label'     => $label,
				'file_path' => $file_path,
			)
		);
	}
}
```

## Ergebnis

![](https://webentwicklerin.at/wp-content/uploads/2026/08/grafik-9.png)

Die Breite bezieht sich nicht auf das Icon, sondern auf den Gesamtblock. Wenn also Padding ins Spiel kommt, muss die Breite entsprechend angepasst werden, damit das Icon noch sichtbar ist.

![](https://webentwicklerin.at/wp-content/uploads/2026/08/grafik-10.png)

Im Code-Editor sieht es so aus:

```
<!-- wp:icon {"icon":"core/quote","style":{"elements":{"link":{"color":{"text":"var:preset|color|accent-2"}}}},"backgroundColor":"contrast","textColor":"accent-2"} /-->
```