The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →If a Vuetify icon appears in the browser but vanishes from an image made with html-to-image, first identify whether it is a font glyph or an SVG. Font icons need their CSS and font files to survive capture; SVG icons need the actual <svg> and visible paths in the captured DOM. Then wait for Vue to render and any fonts to load, and inspect toSvg() output before debugging the final PNG.
Start by checking the icon in the live page
html-to-image does not configure Vuetify or choose an icon library. It clones a DOM node, embeds web fonts and images, serializes the result through an SVG stage, and then renders that SVG to canvas for raster output. If Vuetify has not rendered the icon, or its assets are missing, capture cannot reliably restore it.
- Open the page at the same state and viewport used for capture.
- Confirm the icon is visibly present before calling
toPng()ortoSvg(). - Inspect the icon in browser developer tools. Determine whether its subtree contains an SVG, or whether it depends on an icon-font class and font glyph.
- Only then diagnose the capture pipeline. A missing icon in the live page points first to Vuetify registration, icon naming, or asset loading—not to image export.
The official Vuetify icon guide cited here covers Vuetify 2, which is end of life, and shows both font and SVG approaches. Treat its configuration examples below as Vuetify 2 examples, not as universal configuration for Vuetify 3 or later. Use documentation matching your installed major version before transplanting the settings.
Identify the icon format and make its assets available
Font-based icons
A font icon is drawn from a web-font glyph, so the browser needs both the expected CSS and the corresponding font file. The Vuetify 2 guide’s MDI font example imports @mdi/font/css/materialdesignicons.css and selects the mdi icon font preset. Check that your project includes the library Vuetify is configured to use; a class naming convention from one library will not automatically work with another.
// Vuetify 2 example: load the MDI font CSS in your application entry point
import '@mdi/font/css/materialdesignicons.css'
// In the Vuetify 2 options, select the matching font preset
const vuetifyOptions = {
icons: {
iconfont: 'mdi'
}
}Make sure the icon name in the rendered element matches the configured library’s naming convention, then inspect computed styles and the loaded font face. An element may occupy space and still show no glyph if its font face failed to load or the class points to a different icon set.
SVG icons
With SVG icons, check for a real <svg> and visible path inside the target subtree. Vuetify 2 documents an MDI SVG configuration using @mdi/js path exports and the mdiSvg preset. This avoids relying on an icon-font glyph for the icon itself, though the SVG still needs appropriate dimensions and styling.
// Vuetify 2 example: provide an SVG path from @mdi/js
import { mdiAccount } from '@mdi/js'
const vuetifyOptions = {
icons: {
iconfont: 'mdiSvg'
}
}
// Make mdiAccount available to the component that renders the icon.
// The rendered Vuetify icon should contain an SVG path in the target DOM.For custom SVG icons, the Vuetify 2 guide notes that fill: currentColor lets the path inherit the surrounding text color and scale as intended. Inspect computed fill, width, and height if an SVG exists but appears invisible or clipped. The key distinction is practical: an SVG path should be inspectable in the captured subtree; a font icon depends on the stylesheet and font asset in addition to the element.
Capture only after Vue and fonts are ready
Capturing too early can clone an incomplete component or catch a page before a font has finished loading. Wait for Vue’s render/update cycle, and for font-based icons, wait for the document’s font-loading promise before capturing. This is a diagnostic safeguard, not proof that timing is the cause of every missing icon.
Rank #3
import { nextTick } from 'vue'
import { toPng } from 'html-to-image'
async function capture(target) {
if (!target) throw new Error('Capture target was not found')
// Let Vue finish rendering the target.
await nextTick()
// Wait for document fonts, including icon fonts, when supported.
if (document.fonts?.ready) {
await document.fonts.ready
}
return toPng(target)
}Use the render wait appropriate to your Vue version. The snippet uses Vue 3’s nextTick import; Vue 2 projects should use that version’s matching Vue API rather than copying an import from Vue 3. In either case, the important order is: render the state to be captured, wait for required assets, then pass the actual target element to html-to-image.
For a Vue component, expose or otherwise obtain the DOM node you intend to capture only after it is mounted. If the capture target is conditionally rendered, make sure the condition has resolved and the target is in the document. A selector that returns null cannot be captured; a selector that finds a parent or sibling instead of the icon-containing region can produce an image that looks like an icon failure.
Use the SVG intermediate to isolate the failing stage
The repository’s documented flow uses toSvg(node) to create the SVG representation; toCanvas() calls toSvg() before canvas rendering. That gives you a useful boundary for debugging. Inspect the result from toSvg() before investigating the final PNG.
import { toSvg, toPng } from 'html-to-image'
async function diagnose(target) {
if (!target) throw new Error('Capture target was not found')
const svgDataUrl = await toSvg(target)
console.log('Intermediate SVG data URL:', svgDataUrl)
const pngDataUrl = await toPng(target)
return { svgDataUrl, pngDataUrl }
}- The icon is absent from the intermediate SVG: focus on the cloned DOM, styles, font embedding, or assets referenced outside the target. Verify that the icon is actually a descendant of the chosen node and that the required font or SVG is available when cloning occurs.
- The icon is present in the intermediate SVG but missing from the PNG: the problem is later in the rendering/export path. Inspect the rendered SVG’s dimensions and icon colors, then narrow the issue to browser or canvas rendering rather than Vuetify registration.
- The SVG contains an element but no visible mark: check path data, computed fill, dimensions, and whether CSS makes the icon transparent or too small.
toSvg() is diagnostic because it exposes an intermediate product, not because it guarantees that every external asset or style will work in every browser. Keep the data URL local while debugging; it may contain page content from the target.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
Best Value
Troubleshoot by symptom
Icon is missing on the page and in the image
- Confirm that Vuetify’s icon preset agrees with the installed icon library.
- For the Vuetify 2 MDI font route, check that the documented font CSS import is present and that its font face loads.
- For the SVG route, confirm that the component renders an SVG path rather than an unresolved name or empty element.
- Check the browser console and network panel for failed icon assets, then fix the live-page rendering before changing capture code.
Icon appears on the page but is missing from both SVG and PNG
- Confirm the captured node includes the icon, not merely a nearby wrapper that excludes it.
- Wait until Vue has updated and, for font icons, until
document.fonts.readyresolves. - Check whether the icon relies on CSS or an asset that the cloned representation cannot include. If possible, make the necessary style and icon markup part of the capture target.
- Try an inline, path-based SVG for the capture target when feasible, and verify its fill and dimensions.
Icon is present in SVG but absent or wrong in the PNG
- Inspect the SVG data URL in a browser or developer tool and compare its dimensions and visible fill to the output image.
- Check for clipping, transparent fill, or dimensions that leave the icon outside the rendered area.
- Test whether the problem remains when exporting a simpler target containing only the icon. This helps distinguish icon styling from interactions elsewhere in a large captured subtree.
Font Awesome or another library fails only through Vuetify
Do not assume every integration issue is an html-to-image defect. A historical Vuetify issue describes Font Awesome SVG integration in Vuetify 2.3.17, Vue 2.6.11, and Chrome 86 on Windows 10: the reporter said Font Awesome worked outside the Vuetify icon component but not through it. The issue was marked expected/wontfix. It is evidence of a separate, historical icon integration problem, not evidence of a current general incompatibility between Vuetify and html-to-image. Reproduce the icon directly in the live DOM and check the issue against your own versions before drawing conclusions.
Version and implementation boundaries
Vuetify’s cited icon guide is specifically for version 2 and states that Vuetify 2 has reached end of life; it shows v2.7.2 as the latest release. Its mdi and mdiSvg examples are useful when diagnosing a Vuetify 2 project, but do not treat them as current instructions for another major version. For an application on Vuetify 3 or later, consult that version’s icon documentation and verify the DOM it actually renders.
There is no universal one-line fix established for every Vuetify major version, icon library, browser, or capture timing. The reliable method is to trace the chain: correct icon configuration, correct live DOM, available assets, completed render, SVG intermediate, and final export. This sequence also avoids changing Vuetify configuration to fix what may only be a capture race—or changing capture timing when the icon was never configured correctly.
Or skip the browser setup
If the goal is a screenshot of a page at a URL rather than a client-side export of one custom DOM node, ScreenshotNeo can capture the rendered page with a GET request. It is a screenshot API and MCP server; it does not replace html-to-image when your requirement is specifically to export a selected in-app element or control the browser-side export flow. See the ScreenshotNeo API documentation for request options.
Recommended Free Tools
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpScreenshotNeo removes cookie/consent banners, newsletter popups, and chat widgets before capture, with each step independently switchable. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed; responses identify the page verdict and billing status in headers. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for AI agents and MCP clients. The free plan includes 1,000 screenshots per month with no card, and paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
