title: How to style the PrimeNg dropdown icon
body: <p>I am trying to style PrimeNg's dropdown icon.</p>
  
  <p><a href="https://www.primefaces.org/primeng/#/dropdown" rel="nofollow noreferrer">https://www.primefaces.org/primeng/#/dropdown</a></p>
  
  <p>Here is how it currently looks and what I'm trying to get it to look like.
  <a href="https://i.stack.imgur.com/NtrYY.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/NtrYY.png" alt="enter image description here"></a></p>
  
  <p>I'm guessing I have to style the </p>
  
  <pre><code>ui-dropdown-trigger
  </code></pre>
  
  <p>but I'm not sure what to set it to. </p>
  
  <p>I tried background-color but that didn't work.</p>
  
  <p>Another thing I tried was to just set it as an attribute like: </p>
  
  <pre><code>&lt;p-dropdown ... [styleClass]="{background-color:black}" ...&gt;&lt;/p-dropdown&gt;
  </code></pre>
  
  <p>Any ideas?</p>
  
  <p><strong>Edit</strong>:</p>
  
  <p>This is how I got the desired output:</p>
  
  <ol>
  <li><p>Turned off encapsulation (<a href="https://stackoverflow.com/a/38339123/7615751">reference</a>)</p></li>
  <li><p>Added the following code to the css:</p>
  
  <p>body .ui-dropdown .ui-dropdown-trigger {
  background-color: #2399E5;
  color: white;
  }</p></li>
  </ol>