Hello,

I have a header where I use a couple of icons. The odd thing is that I can see those icons in some pages but no in others.

Besides, I have an email block in the footer. In those pages where icons are not shown in the header, I cann’t see this email block neither.

Making tests, if I add an icon to the content of these pages, then I can see the icons in the header and in the footer.

Any idea why this happens and how can be solved?

Thanks in advance.

Seems to be an annoying space around the icon. How do I remove that? Fiddling around in inspector panel changing the viewbox from “-2 -2 24 24” to “2 2 16 16” made it look like what I want. But can’t change viewbox values from the block settings. What’s the problem here?

Hi there, thank you for the great plugin. Please consider changing the method of setting the icon width from having it in the inline style to an external style block. You could for example set the width defined in the block settings as a CSS property and have a global style with width: --icon-width or something like that. The reason is that currently if someone wants to override the style via external CSS, they have to use !important . All other plugins I’m using define their styles via style blocks in order to allow easy overriding.

My current workaround is to do precisely as above: in my CSS instead of width I define a prop for the width and I set .icon-container { width: var(--icon-width) !important; }

• This topic was modified 2 months, 2 weeks ago by aaylasecura.
• This topic was modified 2 months, 2 weeks ago by aaylasecura. Reason: minor formatting fix

For some reason if you have a page with icons and use a plugin like Post Duplicator to duplicate one of these pages with icons, the icons do not work on the copied page (the block shows the “Block contains unexpected or invalid content” and attempt recovery button.

Hi Nick- I’m trying to use the plugin to make a shape divider. It works fine on a normal full-width block, but with a Cover block the SVG somehow ends up behind the overlay no matter where I put it.

Currently it’s within a group below the Cover block (not within the Cover) with negative top margin. This arrangement looks fine in the editor, but not live. I’ve also tried it everywhere else: on its own below the cover (outside of a group), in a group with the block below the hero etc.

any ideas?
thanks

Hi Nick,
Request to change from transform:rotate(42deg) scaleX(1) scaleY(1) property to rotate: 42deg property, because transform overrides custom settings for other values ??like translate and scale.

https://developer.mozilla.org/en-US/docs/Web/CSS/rotate

Thanks!

Edit: Same thing in the CSS file.

Instead of:

.wp-block-outermost-icon-block a, .wp-block-outermost-icon-block svg {
  height: 100%;
  transition: transform .1s ease-in-out;
  width: 100%
}

.wp-block-outermost-icon-block a:hover {
  transform: scale(1.1)
}

.wp-block-outermost-icon-block svg {
  transform: rotate(var(--outermost--icon-block--transform-rotate, 0deg)) scaleX(var(--outermost--icon-block--transform-scale-x, 1)) scaleY(var(--outermost--icon-block--transform-scale-y, 1))
}

This:

@media (prefers-reduced-motion: no-preference) {
  .wp-block-outermost-icon-block :is(a, svg) {
    transition-property: rotate, scale;
    transition-duration: .1s;
    transition-timing-function: ease-in-out;
  }
}

.wp-block-outermost-icon-block :is(a, svg) {
  height: 100%;
  width: 100%
}

.wp-block-outermost-icon-block :is(a:hover, a:focus) {
  scale: 1.1;
}

.wp-block-outermost-icon-block svg {
  rotate: var(--outermost--icon-block--transform-rotate, 0deg);
  scale: var(--outermost--icon-block--transform-scale-x, 1) var(--outermost--icon-block--transform-scale-y, 1);
}

• This topic was modified 4 months, 2 weeks ago by Gyurmey.

i would like to see an option or setting where i am able to rotate an icon in steps of 10 degree instead of currently 90 degree. Thank you!

I’ve noticed when i add a link to an icon element, it has not the same options like linking an image. Would be nice to streamline those settings. I miss the rel and class attribute options here:

The plugin is great but not offer CUSTOM ATTRIBUTES to add different data variables like using wowjs animate effect with delay. Possible if you could add support for custom attributes?

Thanks

Your site doesn’t include support for the “stackable/icon” block. You can leave this block intact, convert its content to a Custom HTML block, or remove it entirely.

When I set everything up, the page was fine. Then I added links to some of the icons that I had put in and that was fine. Two days later I’ve had this error on every icon in the “backend” of WordPress, the icons don’t work as links anymore on the frontend, either.

Any help is appreciated along the lines of informing me what I did wrong and how I fix it.
Thank you.

Heya

We’re having trouble understanding the “Apply icon color to fill” option. We’ve tried it with a variety of icons (both provided and custom), and it seems like turning it off is equivalent to just NOT having an icon color in the first place.

Does it only work with a specific type of SVG icon, perhaps? ??

See video for full sight of my issue: https://youtu.be/3QJ54KfA2Vs

The colours of the icons above turned from green to white after adding the last icon. Ithink that might be causing the problem, but i have no idea how and how to fix it. The SVG code should be fine and well according to the plugin it self and according to illustrator. But for some reason the green colour just turns white after adding it in.

Great plugin! I know you’ve already addressed icons in button blocks, but rather than modify other blocks, perhaps something could be done to provide an “Inline icon” option, similar to Inline image, with an option to select (and style?) an SVG registered with the plugin.

The Icon Block is a good plugin, the best icon plugin for Gutenberg that I’ve come across so far. But adding new icons by pasting in SVG code is less than ideal. A feature that would be really awesome would be if one could import an icon font file such as that generated by IcoMoon. This would take the plugin to the next level. Is this a feature you would consider?

Hi. I have been using this fantastic block to make shape dividers for pages. But I noticed that the svg tend to get a horizontal one pixel line on certain previews when inspecting on chrome with how it will look on different mobile phones. And I’m curious if there is something I can do inside the block to prevent this? Or is it a outside of block problem?

For example, I have been using the svg codes from shapedividers dot com and copypasting the code into your block with great success. Except for the horizontal line that show up on certain devices. Below image is how it shows on iphone 14 pro max. Sorry for pixellated screenshot. I’m writing from a work PC.

Hey Nick

This plugin and block is just brilliant. Thx. In your faq you state:

Why is my icon not changing color?

The Icon Block includes controls for the icon’s color and background. However, if your SVG icon has hard-coded color/fill values, the plugin will respect those instead of any applied custom colors.

I am kind of new to playing with svg on WP, since it is so restrictive. However, a year back, I designed some icons, that are missing everywhere such as payment methods etc. I did fix the upload, so I have the icons in media library. I have also managed to add the icon to my site. But color is not changing in your block.

I get the faq comment, so excuse me for asking. I reallise it is outside the scope of the block, but how do I not hard code color? I will be making mine in PS, so if you know the answer, it sure is a great help to get this workflow smooth… finally!

Thx

Hi,

I noticed that inserting an icon in the Query Loop, unfortunately, disables its function of infinite pagination (called Force page reload function). This function helps visitors to navigate the pages of the query loop without needing to refresh the whole website page.

When I remove the icon from the query loop, the infinite pagination again works.

Under the option of Force page reload in the query loop it says: (Browsing between pages won’t require a full page reload unless non-compatible blocks are detected).

Thanks for your time reading!!

With kind regards,

Hi Diego, amazing plugin, thank you for your time and energy! Love it’s simplicity and native feel.

I’m running WP 6.4.1 and Icon Block 1.6.0, and for some reason I can’t see all the sidebar settings (Dimensions and Border). What am I missing?

Appreciate any hint ???

Hi tried to use a svg file with this content:

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" xml:space="preserve">
<g>
	<path fill="#231F20" d="M47.122,17.006H7c-0.553,0-1,0.447-1,1v26c0,0.553,0.447,1,1,1h33.872c0.553,0,0.929-0.404,1.128-1   l5.968-25.859C48.165,17.439,47.675,17.006,47.122,17.006z M40.178,43.006H8v-24h37.717L40.178,43.006z"></path>
	<path fill="#231F20" d="M60,21.006h-2v-6c0-2.211-1.789-4-4-4H4c-2.211,0-4,1.789-4,4v32c0,2.211,1.789,4,4,4h50   c2.211,0,4-1.789,4-4v-6h2c2.211,0,4-1.789,4-4v-12C64,22.795,62.211,21.006,60,21.006z M56,47.006c0,1.104-0.896,2-2,2H4   c-1.104,0-2-0.896-2-2v-32c0-1.104,0.896-2,2-2h50c1.104,0,2,0.896,2,2V47.006z M62,37.006c0,1.104-0.896,2-2,2h-2v-16h2   c1.104,0,2,0.896,2,2V37.006z"></path>
	<path fill="#231F20" d="M15,32.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2   c0-0.553-0.447-1-1-1s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S14.447,32.006,15,32.006z"></path>
	<path fill="#231F20" d="M31,32.006h6c0.553,0,1-0.447,1-1s-0.447-1-1-1h-6c-0.553,0-1,0.447-1,1S30.447,32.006,31,32.006z"></path>
</g>
</svg>

but the plugin refused the output. i then removed xml and comment tag and it works. like this:

<svg xmlns="https://www.w3.org/2000/svg" xmlns:xlink="https://www.w3.org/1999/xlink" version="1.0" id="Layer_1" x="0px" y="0px" width="64px" height="64px" viewBox="0 0 64 64" xml:space="preserve">
<g>
	<path fill="#231F20" d="M47.122,17.006H7c-0.553,0-1,0.447-1,1v26c0,0.553,0.447,1,1,1h33.872c0.553,0,0.929-0.404,1.128-1   l5.968-25.859C48.165,17.439,47.675,17.006,47.122,17.006z M40.178,43.006H8v-24h37.717L40.178,43.006z"></path>
	<path fill="#231F20" d="M60,21.006h-2v-6c0-2.211-1.789-4-4-4H4c-2.211,0-4,1.789-4,4v32c0,2.211,1.789,4,4,4h50   c2.211,0,4-1.789,4-4v-6h2c2.211,0,4-1.789,4-4v-12C64,22.795,62.211,21.006,60,21.006z M56,47.006c0,1.104-0.896,2-2,2H4   c-1.104,0-2-0.896-2-2v-32c0-1.104,0.896-2,2-2h50c1.104,0,2,0.896,2,2V47.006z M62,37.006c0,1.104-0.896,2-2,2h-2v-16h2   c1.104,0,2,0.896,2,2V37.006z"></path>
	<path fill="#231F20" d="M15,32.006h2v2c0,0.553,0.447,1,1,1s1-0.447,1-1v-2h2c0.553,0,1-0.447,1-1s-0.447-1-1-1h-2v-2   c0-0.553-0.447-1-1-1s-1,0.447-1,1v2h-2c-0.553,0-1,0.447-1,1S14.447,32.006,15,32.006z"></path>
	<path fill="#231F20" d="M31,32.006h6c0.553,0,1-0.447,1-1s-0.447-1-1-1h-6c-0.553,0-1,0.447-1,1S30.447,32.006,31,32.006z"></path>
</g>
</svg>

When adding a label name to an icon, it does not show up in the block. I mean showing a title text next to an icon.

I don’t know if the issue occurs only for me or everyone. I use the TwentyTwentyThree theme with Gutenberg Builder.

Thank you for seeing my post!

i exported a very simply shape from sketch and this is the code:

seems your icon block does not recognize the rect fill attribute here. because when i set a custom “icon color” in block settings, nothing changes. i checked “Apply icon color to fill”. i can see your block adds the icon color as “color” attribute. so whats the best way to use it? should i add my custom css to apply the desired color? like “fill: currentColor;” to the rect element. or will there be an update to overwrite the fill attribute?

Icons + text on buttons is popular. Usually it’s done with a CSS hack, often with icon fonts (like FontAwesome). Adding a SVG Icon to a button block with the block editor would be a nice feature.

Any ideas on how to do that? Would it be possible with this plugin?

I get an errror when I try to add an SVG from the Media library, it says it’s not a valid SVG. (the file is in the link). The SVG is generated from Illustrator.

What’s wrong with the SVG?

Hi Nick, thanks again for the great plugin. Right now I am working on a website where I need the icons to have the same height. Unfortunately I have to manually adjust the width, because there is no option in the block for height. Could you implement that, would be nice.

I followed the instructions on your blog, but wanted the icons in a separate plugin instead of adding them to my theme. So I created one a simple one, and also made it available on Github if anyone wants it.

One still has to add icons manually in the js. file, as you describe in your blogpost.

hello!
maybe you can add a small check box to deactivate the :hover-effects?

i got it with a css hack now: (the path tags of the svg are linked with a tags, that’s why i used the a:hover)

.wp-block-outermost-icon-block svg g a:hover {
transform:unset !important;
}

Is it possible to show the label?

Awesome block!! Should be in core for sure. Only thing i miss is the option to upload to or pick a .svg file from the media library! Any plans to add this please?

• This topic was modified 2 years, 5 months ago by nicmare.

I realise this probably runs counter-intuitively to why you created this plugin, but on a particular clients site I’d like to restrict their use of the icons to just the custom set of icons I’ve provided. Is that possible?

Hey
Just trying out this plugin for a project with a ton of icons. I’ve installed it on a fresh WordPress 6.0.2, on inserting the block in to the page I get an immediate console error:

Warning: Invalid DOM propertyclass. Did you meanclassName?
svg
SVG@https://xxx/wp-includes/js/dist/primitives.js?ver=cadf5cfaabdb15c8c8fc440547afe919:253:11
To@https://xxx/wp-content/plugins/icon-block/build/index.js?ver=4e94e149ff1e32dee417:1:196287
fieldset
div
Placeholder@https://xxx/wp-includes/js/dist/components.js?ver=76c5a4c54d97b02824ed3d3b164c2811:69648:11
Io@https://xxx/wp-content/plugins/icon-block/build/index.js?ver=4e94e149ff1e32dee417:2:5111
div`
etc etc

Also, not sure if related to the above, but I can’t seem to bulk select the block (i.e. select the icon and another block, or drag hold cursor over page and select multiple blocks at once). For my use case, I would like to select the icon and a heading, then make it a group (rather than make a group, drag in the icon, drag in the heading). Unless there is another way you would suggest to orientate an icon next to a heading.

Thank you

• This topic was modified 2 years, 5 months ago by James Hunt.