title: Hiding buttons, icons and texts based on resolution using Angularjs
body: <p>I have become decent at responsive html (bootstrap) but now I have to remove elements based on resolution.</p>
  
  <p>Look at browser vs. mobile:</p>
  
  <p><a href="https://i.stack.imgur.com/q53aa.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/q53aa.jpg" alt="enter image description here"></a></p>
  
  <p>Based on resolution, some buttons should lose the <code>md-icon</code> others lose their text, and a few buttons should be hidden completely. </p>
  
  <p>How can I do that with angular and CSS?</p>
  
  <ul>
  <li><p>hide icon but leave text, </p></li>
  <li><p>hide text but leave icon,</p></li>
  <li><p>hide button completely</p></li>
  </ul>
  
  <p>Here is some of my code</p>
  
  <pre><code>&lt;!--Save Invoice--&gt;
  &lt;td style="width:35%; text-align:right; padding-left:4px;"&gt;
      &lt;button class="book-button book-text-button book-std-bg" ng-click="vm.invoiceSave()"&gt;
          &lt;md-icon class="material-icons book-material" aria-label="Save"&gt;save&lt;/md-icon&gt;
          SAVE
      &lt;/button&gt;
  &lt;/td&gt;
  
  &lt;!--Pay Invoice--&gt;
  &lt;td style="width:30%; text-align:right; padding-left:4px;" ng-if="vm.invoiceForm._id!='new'"&gt;
      &lt;button class="book-button book-text-button col-std-cyan" ng-click="vm.invoicePay()"&gt;
          &lt;md-icon class="material-icons book-material" aria-label="Save"&gt;monetization_on&lt;/md-icon&gt;
          PAY
      &lt;/button&gt;
  &lt;/td&gt;
  
  &lt;!--Print Invoice--&gt;
  &lt;td style="width:5%; text-align:right; padding-left:4px;"&gt;
      &lt;button class="book-button book-text-button col-std-black" ng-click="vm.printInvoice()"&gt;
          &lt;md-icon class="material-icons book-material" aria-label="Delete"&gt;print&lt;/md-icon&gt;
      &lt;/button&gt;
  &lt;/td&gt;
  </code></pre>