Comment to 'How to change the search icon in the top search box?'
  • You may try to use the anonymous mode of Chrome and another SVG, we suggest that the reason in the browser work.

    • Hi @LeonidS Thanks for your reply. For whatever reason, the new SVG search icon decided to show on Chrome today. Probably because of the way chrome hamdles cache. The old cache is keeped for some times. Yesterday I tried everything even the anonymous mode on both destop and mobile and that didn't work.

      The replacer code you shared has the following parameters width="24px" height="24px". That makes the SVG icon a bit smaller. I have tried to change it to 32px x 32 px to match the size of the other icons in the Member Toolbar as it is here on unacms.com but that didn't work. Do I miss something in the replacer code? I can see here on unacms.com that you use 24x24px and the image is still bigger. Thanks

      • Well, the respective dimensions that are declared in the standard .svg file don't really matter when they are overwritten by CSS. You can control the size however you want via CSS, no matter what values are set inside the SVG file.

        For example:

        svg {
        width: 32px;
        height: 32px;
        } 
        

        This will force any SVG element to display at 32x32px, regardless of its internal width and height attributes.

        The only thing that really matters inside the SVG is the viewBox, because it defines how the content inside scales and keeps its aspect ratio when you resize it with CSS. As long as the viewBox is set properly, you can style the size however you like from outside.

        Also, if the SVG is inline, it’s a good idea to double-check for any other CSS that might affect its size, like max-width, max-height, or font-size if it’s inside a button or toolbar.

        • Please, I know what I am trying to achieve when I asked that specific question to @LeonidS