Rendering a Navigation with Icons


first of all sry for my bad English. I’m from Germany and started working with Neos since a few weeks.
At the Moment I’m working on a Onepage-Site for a good Friend.

Now I want to render a Navigation with different Icons for each Navigation-Point. The Problem is that I have no idea how to do that. I tried to add the Media-Viewhelper but I just get an Error.

This is an Link to the Site:
Here you can download the Site Package:

I hop you can help me.

Thanks, David

The media viewhelper is for a Typo3.Media asset instance. If you want to render an icon which is placed in your Resources/Public folder use the uri viewhelper.

<img src="{f:uri.resource(path: 'my/icon.png', package: 'My.Package')}" />

In this case the icon is in Resources/Public/my/icon.png

First thanks for the fast answer. This is for a fixed Icon but i want to set the Icon as an image in the backend in the settings from the Page. Is this possible?

When you look into the Package there is a Section-Element and for every Section i am rendering an Navigation-Point. So I want to set the Icon in the Settings of the Section-Element and load it in the Navigation.

If I try to use the Image in the Template I get this Error:

Catchable Fatal Error: Argument 1 passed to TYPO3\Media\Domain\Service\AssetService_Original::getThumbnailUriAndSizeForAsset() must implement interface TYPO3\Media\Domain\Model\AssetInterface, null given,…

I don’t know if this is the best solution but I get it with this code

<img src="{f:uri.resource(resource:}" />

Now I got only one question left. Neos is rendering a lot of Tag’s in the Frontend which I don’t need. To keep the code clean I want to remove them. I found one Solution for Neos 1.x but not for 2.x. Can someone help me with this Problem?

For Neos 1.x (Just found it in german):

Hey @DavidLang,
it depends on the tags. Basicaly you can do that. Just check the core prototypes and it’s attributes and @processor stuff. You can override those and fit them to your needs

Hey, I found the “ContentElementWrappingService” Class. I’m still learning php but is it right that here the Neos-Tags like “neos-contentcollection” are generated? If this true, is it enough to extend this class with something like: “Just do it when you are in the Backend”?


you don’t need php for this. Check this file: /Packages/Application/TYPO3.Neos/Resources/Private/TypoScript/Prototypes/Content.ts2

Every node that supertypes TYPO3.Neos:Content will wrap the nodetype in the class attribute. You can overrride it like this

prototype(TYPO3.Neos:Content) {
attributes.class.@process.nodeType >

in your custom TS. Are there any specific wraps you wann get rid of?

Hey, this was exactly what I am looking for. Tanks.

Is this also working for a ContentCollection? I tried this:

prototype(TYPO3.Neos:ContentCollection) {
attributes.class.@process.nodeType >

But that doesn’t remove the Wrap “neos-contentcollection”.

Check the Prototype for a ContentCollection at

 prototype(TYPO3.Neos:ContentCollection) {
   attributes.class.@process.collectionClass >

Thanks for the Answer, this will remove the Classes from the Wraps of the ContentElements and ContentCollections but I still got the Wraps for Example:

<div><--Want to remove this Wrap
         Text Text Text

and I want to remove the DIV-Wraps completely but just in the Frontend. Is this possible for the ContentElements?


Don’t know if this is right or not but it is working for the ContentCollection:

prototype(TYPO3.Neos:ContentCollection) >
prototype(TYPO3.Neos:ContentCollection) < prototype(TYPO3.Neos:ContentCollectionRenderer){

	@context.node = ${Neos.Node.nearestContentCollection(node, this.nodePath)}

	content = TYPO3.Neos:ContentCollectionRenderer

	# We have to define contentElementWrapping, because we do not inherit from TYPO3.Neos:Content
	@process.contentElementWrapping = TYPO3.Neos:ContentElementWrapping

	@cache {
		mode = 'cached'

		entryIdentifier {
			collection = ${node}

		entryTags {
			1 = ${'DescendantOf_' + node.identifier}
			2 = ${'Node_' + node.identifier}

		maximumLifetime = ${q(node).context({'invisibleContentShown': true}).children().cacheLifetime()}

	@exceptionHandler = 'TYPO3\\Neos\\TypoScript\\ExceptionHandlers\\NodeWrappingHandler'