Material: md-tooltip not working inside md-icon

[hodeyp]

I have a need to show status symbols on an app that I am building and when the user hovers over the icon it shows them the description of the status. The icon is placed within an md-list

code...

                <md-icon md-svg-icon="communication:ic_comment_24px">
                    <md-tooltip md-autohide="true">
                        17 Comments
                    </md-tooltip>
                </md-icon>

However, the tooltip is not displayed. If I embed the icon in a div and put the tooltip on the div it does work but as it is now a div, the md-list layout breaks.

Any reason why a tooltip cannot be used within an icon?

[ThomasBurleson]

@hodeyp -
With <md-icon>, the css style pointer-events:none; is used. Tooltips will not show if a parent element has pointer-events:none;. This should not be unexpected because mdIcon is not interactive; it is display only. For interactive, use

 <md-button> 
    <md-icon></md-icon>
    <md-tooltip></md-tooltip>
 </md-button>