[Bug]: Adding Custom Admonition

[HippyCraig]

Check for existing bug reports before submitting.

• I searched for existing Bug Reports and found no similar reports.

Expected Behavior

I expect the icon selection to accept the svg file I selected.

Current behaviour

It sort of appears to accept it but leaves the text field blank. If you look at the red box you can see an outline of the shape of my SVG icon but I cant save the dialog box as there is an error on the form

Reproduction

Select an SVG file, the preview sort of updates with a shadow shape of hte SVG I selected but I cant save the form

Which Operating Systems are you using?

• Android
• iPhone/iPad
• Linux
• macOS
• Windows

Obsidian Version Check

1.3.5 and 1.3.4

Plugin Version

9.3.1

Confirmation

• I have disabled all other plugins and the issue still persists.

Possible solution

No response

[stale]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.

[HippyCraig]

Any updates?

[Aetherinox]

I also just came across this bug as well. Can't use a custom icon, locks me to using only FA or the other two. Went digging in the code, and with the custom option currently broke, the only way to implement a custom icon is to hardcode it into the js file with the SVG path.

[HippyCraig]

Thanks for the info, I started making my own using CSS I found that you can actually put the SVG code inside the CSS file directly, and that seems to work out real well since one update in the file will propgate through my notes. Heres one I use for PowerShell scripts
/* Custom PowerShell */
.callout[data-callout="file-type-powershell"] {
--callout-title-color: var(--callout-type-basic-darkcolor);
--callout-color: var(--callout-type-basic-lightcolor);
--callout-icon: <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 210 210" style="height: 25px; width: 25px;"> <g transform="translate(2,4)" clip-rule="evenodd" fill-rule="evenodd"> <path d="m-47.547 226.87c0-97.129 0.094-194.26-0.195-291.39-0.021-6.982 1.404-8.411 8.388-8.389 94.397 0.292 188.8 0.292 283.2 0 6.984-0.022 8.41 1.407 8.389 8.389-0.289 97.128-0.195 194.26-0.195 291.39-3.238 2.008-6.837 1.129-10.268 1.131-93.015 0.049-186.03 0.049-279.05 0-3.431-2e-3 -7.03 0.877-10.267-1.131z" display="none" fill="#2671be"/> <path d="m120.14 0.032c23.011-8e-3 46.023-0.078 69.034 0.019 13.68 0.056 17.537 4.627 14.588 18.137-8.636 39.566-17.466 79.092-26.415 118.59-2.83 12.484-9.332 17.598-22.465 17.637-46.023 0.137-92.046 0.152-138.07-6e-3 -15.043-0.053-19-5.148-15.759-19.404 8.794-38.717 17.635-77.422 26.547-116.11 3.395-14.744 8.497-18.792 23.502-18.835 23.012-0.065 46.024-0.017 69.036-0.025z" fill="#e0eaf5"/> <path d="m85.365 149.81c-23.014-8e-3 -46.029 0.098-69.042-0.053-11.67-0.076-13.792-2.83-11.165-14.244 8.906-38.71 18.099-77.355 26.807-116.11 2.335-10.394 7.372-14.988 18.508-14.885 46.024 0.427 92.056 0.137 138.08 0.184 11.543 0.011 13.481 2.48 10.89 14.187-8.413 38.007-16.879 76.003-25.494 113.96-3.224 14.207-6.938 16.918-21.885 16.951-22.234 0.047-44.469 0.012-66.702 4e-3z" fill="#2671be"/> <path d="m104.95 73.951c-1.543-1.81-3.237-3.894-5.031-5.886-10.173-11.3-20.256-22.684-30.61-33.815-4.738-5.094-6.248-10.041-0.558-15.069 5.623-4.97 11.148-4.53 16.306 1.188 14.365 15.919 28.713 31.856 43.316 47.556 5.452 5.864 4.182 9.851-1.823 14.196-23.049 16.683-45.968 33.547-68.862 50.443-5.146 3.799-10.052 4.75-14.209-0.861-4.586-6.189-0.343-9.871 4.414-13.335 17.013-12.392 33.993-24.83 50.9-37.366 2.355-1.746 5.736-2.764 6.157-7.051z" fill="#fdfdfe"/> <path d="m112.24 133.82c-6.196 0-12.401 0.213-18.583-0.068-4.932-0.223-7.9-2.979-7.838-8.174 0.06-4.912 2.536-8.605 7.463-8.738 13.542-0.363 27.104-0.285 40.651-0.02 4.305 0.084 7.483 2.889 7.457 7.375-0.031 5.146-2.739 9.133-8.25 9.465-6.944 0.42-13.931 0.104-20.899 0.104-1e-3 0.017-1e-3 0.037-1e-3 0.056z" fill="#fcfdfd"/> </g> </svg>;
}

The SVG code is usally on one line, but this box text wraps so its not so elegant to read unless you copy and paste it out.