How to create a dropdown from an icon using Angular Material?

Issue

I would like to click the alarm icon and that creates a dropdown menu.

I have already seen this

Here is what I have already tried on this demo

I still have the dropdown input box, which I want removed, so I can only see the icon before clicking. I would like it so that it is only the icon and when that gets pressed, it generates the dropdown.

How can I achieve this?

PS: it would be great to see a demo of it on Stackblitz :)

Solution

I think you can achieve what you're looking for just by using some CSS, essentially hiding the .mat-select-arrow-wrapper element and adjusting some padding.

I've created a StackBlitz example that you can have a look at.

Answered By - Muhammad Ahsan Ayaz