Meta Box

Icon field icon_dir dropdown shows SVG attribute content in label

Support › MB Builder › Icon field icon_dir dropdown shows SVG attribute content in label

Viewing 4 posts - 1 through 4 (of 4 total)
  • Author
    Posts
  • February 23, 2026 at 8:14 PM #49761
    Kyle IversonKyle Iverson
    Participant

    When using custom SVG icons via icon_dir, the dropdown displays options as:

    analytics-01-stroke-rounded"> [icon] analytics-01-stroke-rounded

    instead of:

    [icon] analytics-01-stroke-rounded

    Field config:

    'type' => 'icon',
'icon_dir' => 'wp-content/uploads/icons/',

    Sample SVG:

    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" color="#000000" fill="none">
    <path d="M7 17L7 13" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
    <path d="M12 17L12 7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
    <path d="M17 17L17 11" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"></path>
    <path d="M2.5 12C2.5 7.52166 2.5 5.28249 3.89124 3.89124C5.28249 2.5 7.52166 2.5 12 2.5C16.4783 2.5 18.7175 2.5 20.1088 3.89124C21.5 5.28249 21.5 7.52166 21.5 12C21.5 16.4783 21.5 18.7175 20.1088 20.1088C18.7175 21.5 16.4783 21.5 12 21.5C7.52166 21.5 5.28249 21.5 3.89124 20.1088C2.5 18.7175 2.5 16.4783 2.5 12Z" stroke="currentColor" stroke-width="1.5" stroke-linejoin="round"></path>
</svg>
    February 24, 2026 at 6:48 PM #49768
    PeterPeter
    Moderator

    Hello Kyle,

    Thanks for reaching out.

    If you use the SVG code, you need to use the JSON file to show the labels. Please follow the documentation to read more details https://docs.metabox.io/fields/icon/#using-svgs

    February 24, 2026 at 8:32 PM #49770
    Kyle IversonKyle Iverson
    Participant

    Hi Peter,

    Thanks for the response, but I'm using icon_dir (the folder method), not the JSON method so I don't believe the JSON documentation applies here.

    The issue is that when MetaBox reads the SVG files from the folder and inlines them, the double quotes inside the SVG attributes (which are standard and valid SVG) appear to conflict with the surrounding HTML/JSON context, resulting in the label being displayed as:

    analytics-01-stroke-rounded"> [icon] analytics-01-stroke-rounded

    I was able to work around it by converting all double quotes inside the SVG attributes to single quotes, which resolved the issue. However, double-quoted attributes are completely valid SVG syntax, so this seems like a bug in how MetaBox reads and inlines SVG file contents.

    Could this be looked into?

    February 26, 2026 at 11:34 PM #49774
    PeterPeter
    Moderator

    Hello Kyle,

    Thanks for your feedback.

    I can reproduce the issue and replacing the double quotes with single quotes will fix it. I'm going to escalate the issue to the development team to include a fix for this in future updates.

  • Author
    Posts
Viewing 4 posts - 1 through 4 (of 4 total)
  • You must be logged in to reply to this topic.