Name: property not shown when using custom icon to toggle color palette

[Stephen-Gates]

I've used a custom icon to toggle the color palette to light mode. When I hover the mouse over the icon is shows the .svg name instead of the name: property value. The octicons icon and name to toggle to dark mode work fine.

Wondering if this is a bug or my error?

• Repository
• Site

[squidfunk]

The SVG you're using has a title attribute defined, so I think this is what the browser is using. If you remove that, the browser should pick up the link title. This is browser behavior and not fixable in Material for MkDocs. The source of the SVG is:

<svg width="381px" height="391px" viewBox="0 0 381 391" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 51.3 (57544) - http://www.bohemiancoding.com/sketch -->
    <title>ghost</title>
    <desc>Created with Sketch.</desc>
    <defs></defs>
    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="ghost">
            <path d="M52,103 C52,46.1146708 98.1146708,0 155,0 C211.885329,0 258,46.1146708 258,103 C258,112.176087 258.27283,121.288451 258.810821,130.329423 C305.080691,112.020377 344.135938,81.7768123 373.164759,44.0985558 C374.366933,48.0146692 375.438904,52.0013328 376.374728,56.0548315 C394.901128,136.301485 353.98657,216.396178 282.455853,250.209594 C300.1463,301.719839 326.862379,349.034878 360.715778,390.266402 C353.873813,390.7527 346.965786,391 340,391 C248.411549,391 166.808553,348.247184 114.059046,281.609585 C33.0938633,252.599497 -15.1306028,166.914144 4.69158135,81.0548315 C5.62740525,77.0013328 6.69937687,73.0146692 7.90155072,69.0985558 C20.783306,85.8185626 35.6394718,101.074525 52.2243388,114.473225 C52.0752489,110.667329 52,106.842452 52,103 Z M110.5,104 C121.269553,104 130,93.4786916 130,80.5 C130,67.5213084 121.269553,57 110.5,57 C99.7304474,57 91,67.5213084 91,80.5 C91,93.4786916 99.7304474,104 110.5,104 Z M171.5,104 C182.269553,104 191,93.4786916 191,80.5 C191,67.5213084 182.269553,57 171.5,57 C160.730447,57 152,67.5213084 152,80.5 C152,93.4786916 160.730447,104 171.5,104 Z M140.5,166 C151.269553,166 160,155.478692 160,142.5 C160,129.521308 151.269553,119 140.5,119 C129.730447,119 121,129.521308 121,142.5 C121,155.478692 129.730447,166 140.5,166 Z" id="Combined-Shape" fill="#FFFFFF"></path>
            <g id="face" transform="translate(91.000000, 57.000000)"></g>
        </g>
    </g>
</svg>

[Stephen-Gates]

Thank you, that solved the problem 😄