I followed this tutorial to replace the icons
I got the Android icons here
Material Symbols and Icons - Google Fonts
but when they replace they get misaligned like as in below example
How can I align them?
2 Likes
The easiest way to manage this will be to edit the icons themselves.
One factor I can see is that the icon set we use by default, FontAwesome, doesn’t include dimensions within their SVG files while Google does.
FontAwesome’s opening tag:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512">
Google’s (note the height and width added around the viewBox)
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48">
So I’d try removing the height/width from Google’s icons… the resulting spritesheet looks like this:
<?xml version="1.0" encoding="UTF-8"?>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="google-bars" viewBox="0 96 960 960" ><path d="M150 816q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 756h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 816H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 546h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 606H150Zm0-210q-12.75 0-21.375-8.675-8.625-8.676-8.625-21.5 0-12.825 8.625-21.325T150 336h660q12.75 0 21.375 8.675 8.625 8.676 8.625 21.5 0 12.825-8.625 21.325T810 396H150Z"/></symbol>
</svg>
and the result is aligned 
2 Likes
Thanks for helping me, I did it here and it worked, but there are some svg icons that even if I remove them, they are still big, like the ones below
<symbol id="baloon">
<svg xmlns="http://www.w3.org/2000/svg"><path d="M17.45 43.35v-10.4h-.8q-5.25.05-8.725-3.375Q4.45 26.15 4.45 21q0-5.15 3.575-8.75 3.575-3.6 8.725-3.6h3.2l-3.8-3.85 2-2.05 7.4 7.4-7.4 7.4-2-2.05 3.8-3.9h-3.2q-3.9 0-6.65 2.75Q7.35 17.1 7.35 21q0 4 2.775 6.7t6.725 2.7h3.5v5.9l5.95-5.9h5q3.9 0 6.65-2.75 2.75-2.75 2.75-6.7 0-3.9-2.775-6.65-2.775-2.75-6.675-2.75H29.5v-2.9h1.75q5.15 0 8.75 3.575 3.6 3.575 3.6 8.725 0 5.15-3.575 8.75-3.575 3.6-8.725 3.6h-3.75Z"/></svg>
</symbol>
<symbol id="points">
<svg xmlns="http://www.w3.org/2000/svg"><path d="M11.3 35.15q3.05-2.1 6.125-3.25T24 30.75q3.5 0 6.575 1.15t6.225 3.25q2.1-2.65 3.1-5.35 1-2.7 1-5.8 0-7.15-4.875-12.025T24 7.1q-7.15 0-12.025 4.875T7.1 24q0 3.1 1 5.8 1 2.7 3.2 5.35Zm12.7-9.4q-2.95 0-4.975-2.025Q17 21.7 17 18.75q0-2.95 2.025-4.975Q21.05 11.75 24 11.75q2.95 0 4.975 2.025Q31 15.8 31 18.75q0 2.95-2.025 4.975Q26.95 25.75 24 25.75Zm0 18.05q-4.1 0-7.675-1.55t-6.275-4.275q-2.7-2.725-4.275-6.3Q4.2 28.1 4.2 23.95q0-4 1.575-7.6 1.575-3.6 4.275-6.325t6.275-4.275Q19.9 4.2 24.05 4.2q4 0 7.6 1.575 3.6 1.575 6.3 4.275 2.7 2.7 4.275 6.3Q43.8 19.95 43.8 24q0 4.1-1.55 7.675t-4.275 6.275q-2.725 2.7-6.325 4.275Q28.05 43.8 24 43.8Zm0-2.9q2.7 0 5.35-.85 2.65-.85 5.1-2.8-2.4-1.75-5.075-2.65-2.675-.9-5.375-.9t-5.375.9q-2.675.9-5.025 2.65 2.4 1.95 5.05 2.8 2.65.85 5.35.85Zm0-18.1q1.75 0 2.9-1.15t1.15-2.9q0-1.75-1.15-2.9T24 14.7q-1.75 0-2.9 1.15t-1.15 2.9q0 1.75 1.15 2.9T24 22.8Zm0-4.05Zm0 18.5Z"/></svg>
</symbol>
do i have to take anything else to make it smaller?
1 Like
I noticed now that if I download the svg icons from google fonts they no longer appear with the viewbox as they came before, why is that? would that have anything to do with it?
1 Like
Before, the svg of the workspace icon was like this, with a view box (I just had to remove the height and width and everything was fine)
<svg xmlns="http://www.w3.org/2000/svg" height="48" viewBox="0 96 960 960" width="48"><path d="M230.693 931.614q-62.886 0-105.596-42.711-42.711-42.71-42.711-105.596 0-62.885 42.711-105.595 42.71-42.711 105.596-42.711 62.885 0 105.595 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.71 42.711-105.595 42.711Zm499.422 0q-62.693 0-105.596-42.711-42.903-42.71-42.903-105.596 0-62.885 42.903-105.595 42.903-42.711 105.596-42.711 62.693 0 105.404 42.711 42.711 42.71 42.711 105.595 0 62.886-42.711 105.596-42.711 42.711-105.404 42.711Zm-499.497-58.383q37.228 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.31-26.385-63.539-26.385-37.228 0-63.613 26.31-26.385 26.31-26.385 63.539 0 37.228 26.31 63.613 26.31 26.385 63.539 26.385Zm499.23 0q37.229 0 63.613-26.31 26.385-26.31 26.385-63.539 0-37.228-26.31-63.613-26.309-26.385-63.346-26.385-37.036 0-63.613 26.31Q640 746.004 640 783.233q0 37.228 26.48 63.613 26.481 26.385 63.368 26.385Zm-249.04-360.847q-62.693 0-105.596-42.903-42.903-42.903-42.903-105.596 0-62.693 42.903-105.404t105.596-42.711q62.693 0 105.403 42.711 42.711 42.711 42.711 105.404t-42.711 105.596q-42.71 42.903-105.403 42.903ZM480.54 454q37.229 0 63.614-26.48 26.385-26.481 26.385-63.368 0-37.229-26.31-63.613-26.31-26.385-63.346-26.385-37.037 0-63.614 26.31-26.577 26.309-26.577 63.346 0 37.036 26.481 63.613Q443.653 454 480.54 454Zm.075-89.923Zm249.308 419.23Zm-499.23 0Z"/></svg>
now it’s downloading like this, without a view box and it’s all big on the website
<svg xmlns="http://www.w3.org/2000/svg" height="48" width="48"><path d="M11.55 41.8q-3.15 0-5.3-2.15t-2.15-5.3q0-3.15 2.15-5.275 2.15-2.125 5.3-2.125t5.275 2.125Q18.95 31.2 18.95 34.35q0 3.15-2.125 5.3T11.55 41.8Zm24.95 0q-3.15 0-5.275-2.15-2.125-2.15-2.125-5.3t2.125-5.275Q33.35 26.95 36.5 26.95q3.15 0 5.275 2.125Q43.9 31.2 43.9 34.35q0 3.15-2.125 5.3T36.5 41.8Zm-24.95-2.95q1.85 0 3.175-1.3 1.325-1.3 1.325-3.2 0-1.85-1.325-3.175Q13.4 29.85 11.55 29.85q-1.85 0-3.175 1.325Q7.05 32.5 7.05 34.35q0 1.85 1.3 3.175 1.3 1.325 3.2 1.325Zm24.95 0q1.85 0 3.175-1.3Q41 36.25 41 34.35q0-1.85-1.325-3.175Q38.35 29.85 36.5 29.85q-1.85 0-3.175 1.325Q32 32.5 32 34.35q0 1.85 1.325 3.175Q34.65 38.85 36.5 38.85ZM24.05 20.8q-3.15 0-5.3-2.125T16.6 13.4q0-3.15 2.15-5.275Q20.9 6 24.05 6t5.275 2.125Q31.45 10.25 31.45 13.4q0 3.15-2.125 5.275Q27.2 20.8 24.05 20.8Zm0-2.9q1.85 0 3.175-1.325Q28.55 15.25 28.55 13.4q0-1.85-1.325-3.175Q25.9 8.9 24.05 8.9q-1.85 0-3.175 1.325Q19.55 11.55 19.55 13.4q0 1.85 1.325 3.175Q22.2 17.9 24.05 17.9Zm0-4.5ZM36.5 34.35Zm-24.95 0Z"/></svg>
2 Likes
Yes this might be causing some problems, strange that it was removed… I wonder if Google changed something? You can try moving the height/width to the viewbox values instead, that would look like:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 48 48">
2 Likes
Now it works, thanks a lot for helping me!
This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.