title: Showing Material Checkbox Animation On Hover
body: <p>Check out the effect at this <a href="https://material-components.github.io/material-components-web-catalog/#/component/checkbox" rel="nofollow noreferrer">link</a> where the circular background of the checkbox is shown on hover. How can I get this same behavior while using <code>&lt;mat-checkbox&gt;</code> in Angular? I want the background to show on hover as well as the normal animation on transitions from checked to unchecked, unchecked to checked, etc. I am using <code>@angular/material</code> version 6.4.5. By inspecting the documentation for version 7.1.1, a <code>persistent-ripple</code> class is applied to a <code>&lt;div&gt;</code> inside the checkbox on hover. This does not happen in the documentation for version 6.4.7. The link for the older documentation is <a href="https://v6.material.angular.io/components/checkbox/api" rel="nofollow noreferrer">here</a>.</p>