javascript - How to create a dropdown from an icon using Angular Material? - Stack Overflow

admin管理员组

文章数量:1398832

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 :)

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 :)

• javascript
• angular
• angular-material

Share Improve this question Follow edited Dec 13, 2018 at 8:54 apollowebdesigns asked Dec 13, 2018 at 8:47 apollowebdesignsapollowebdesigns 76811 gold badge1313 silver badges3030 bronze badges 6

• Can you show us what you've tried so far? – Julien Lachal Commented Dec 13, 2018 at 8:50
• @JulienLachal It's on the demo link above. But here it is again stackblitz./edit/angular-e7twlq?file=app/… – apollowebdesigns Commented Dec 13, 2018 at 8:52
• Sorry, wasn't clear, I thought you were showing 2 different links of what you had seen, my bad. – Julien Lachal Commented Dec 13, 2018 at 8:53
• 1 boolean flag will do a trick but not sure this is what you wanted? To achieve this in a proper way need to apply CSS – Prashant Pimpale Commented Dec 13, 2018 at 9:01
• You need to try to hide the arrow, put no background on the mat-form-field-underline and reposition the mat-icon of the alarm clock – Julien Lachal Commented Dec 13, 2018 at 9:04

 |  Show 1 more ment

2 Answers 2

Sorted by: Reset to default 5

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.

Nowdays i think someone would use the Angular Material Menu Component.
see Angular Material Docs: Menu Component Example "Menu with icons".

If someone stumbles over this like my colleague.

本文标签： javascriptHow to create a dropdown from an icon using Angular MaterialStack Overflow