google/material-design-icons ? reverse-engineered prompt

I'm designing a new web app and I want to use Google's official Material Design icons. Can you create a simple HTML page that acts as a style guide or showcase for them?

Please use the modern "Material Symbols" set you can find on Google Fonts. I'd like to see a few common UI icons like 'home', 'settings', 'search', 'notifications', and 'account'. Show them in the main "outlined" style, but maybe include a section with the "rounded" style too, so I can compare.

A key thing for me is interactivity. Can you make it so when I hover over an icon, it gets a little bolder? Also, for something like a favorite button, can you make it so the icon is empty at first, and then fills in completely when you click it? Use whatever CSS is needed to make that happen.