angularjs - icon - ng style angular 4

¿Cómo cambio el color de un icono md en material angular?

Question

Comencé a usar Angular Material en mi proyecto y me preguntaba cómo puedo cambiar el color svg dentro de un am-button .

Este es mi código:

<md-button class="md-fab md-primary">
    <md-icon
        class="ng-scope ng-isolate-scope md-default-theme"
        style="height: 14px; width: 14px;"
        md-svg-src="img/material-icons/core/arrow-forward.svg"
    ></md-icon>
</md-button>

¿Qué necesito agregar para cambiar el color del svg del negro actual al blanco, como en la demostración de botón de Google ? (sección "Botón de icono usando iconos de fuente" )

Answer 1

Salida más fácil

Ahora no hay necesidad de cambiar el svg o la propiedad de relleno.

Simplemente agregue la propiedad de color !important a md-icon en CSS:

md-icon {
  color: #FFF !important;
}

Answer 2

Agrega esto a tu css:

svg {
    fill: inherit;
}

El svg ahora heredará el atributo de relleno de su icono md

<md-icon style="fill: red;" md-svg-src=''/img/ic_menu_white_24px.svg''></md-icon>

Answer 3

Debería poder hacer esto agregando "relleno: blanco" al estilo del icono.

<md-icon class="ng-scope ng-isolate-scope md-default-theme" style="height: 14px; width: 14px; fill:white" md-svg-src="img/material-icons/core/arrow-forward.svg"></md-icon>

Answer 4

El SVG está anidado debajo del icono ng, por lo que solo necesita agregar esto a su CSS y agregar fill: red; al estilo en ng-icon.

md-icon svg {
  fill: inherit;
}

Answer 5

El problema parece ser con los SVG descargados de los íconos de Google Design, ya que anulan el atributo de relleno en la raíz svg. Compare la fuente de vista de SVG en Google Design con las que se usan en el ejemplo .

Solución: anular el relleno en css.

md-icon svg {
    fill: currentColor;
}

Answer 6

Estaba teniendo un problema similar, necesitaba cambiar el color SVG usando CSS, pero también necesitaba mantener el color SVG original (por ejemplo, fill = "# fff") cuando no se proporcionó CSS.

Mejoré el enfoque de Jason Aunkst para hacerlo funcionar. Aquí está la solución:

md-icon[style*="color:"] svg [fill] {
    fill: inherit;
}

Esa clase establecerá cualquier elemento secundario de svg con un atributo de relleno para heredar el valor de color siempre que svg sea un elemento secundario de un elemento md-icon que contenga el atributo de estilo con un valor de color.

Sin embargo, solo funcionará en los SVG que solo usan un color de relleno. Ajuste según sea necesario, espero que ayude!

Answer 7

Estoy en material angular 0.8, y simplemente agregué

    style="color:white;font:bold;" 

al elemento md-icon.

Answer 8

Estoy usando esto en el CSS:

.my-icon svg
{
   fill : #fff;
}

Y en el HTML:

<ng-md-icon icon="search" class="my-icon"></ng-md-icon>

¡Funciona bien!

Answer 9

La siguiente es la única forma en que he logrado que funcione a través de las hojas de estilo.

md-icon {
  svg {
    path {
      fill: #ffffff;
    }
  }
}

Answer 10

Para las personas que intentan colorear su icono md, descubrí que tenía el mismo problema al usar Angular 1.3.xy Angular Material 0.8.x.

Solucioné el problema editando mis archivos SVG y eliminando el atributo "relleno" que estaba anulando cualquier color heredado.

Después de eliminar este atributo de "relleno" en cada archivo SVG, pude elegir correctamente el color que quería asignar al icono gracias a CSS como lo especifica Jason Aunkst .

Answer 11

Tenía un problema similar cuando intentaba cambiar el color predeterminado del icono svg. Para aquellos que están experimentando el problema similar, asegúrese de verificar la versión de material angular que está utilizando actualmente. Actualmente, estoy usando el material angular "0.7.1" y esto es muy importante.

NOTA: con mi versión actual de Angular-material (0.7.1), la <mdIcon></mdIcon> solo verifica si attr.Icon está definido o no durante postLinking compileFunction. Con esta implementación, para hacer referencia a sus archivos de íconos svg, simplemente agregue el atributo de ícono a la directiva del elemento <mdIcon icon="iconsDir/path_to_icon_file.svg"></mdIcon> . Tenga en cuenta que en la versión anterior de material angular, podría tener que usar md-src-svg para hacer referencia a sus archivos svg, ya no es el caso en la versión 0.7.1.

Entonces, si estaba usando 0.7.1 y siguiendo las instrucciones anteriores, debería hacer que su ícono svg se renderice correctamente, ahora es el momento de cambiar el color de fondo del svg que está usando.

Archivo SVG en bruto antes de cualquier modificación:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" width="24px"
 height="24px" viewBox="0 0 24 24">
<g>
    <path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" />
</g>

Debería tener una carpeta dentro de su proyecto donde guarde todos sus íconos svg, en mi caso, tengo una carpeta llamada íconos donde almaceno todos mis íconos svg. El ejemplo del archivo svg es el ícono svg no modificado donde lo obtuve de https://github.com/google/material-design-icons . (Predeterminado es su representación como un archivo svg negro)

Para cambiar el archivo svg predeterminado, simplemente debe agregar un atributo de relleno a su archivo svg en bruto. Ver versión modificada del archivo svg :

<path d="M6,2C4.9,2,4,2.9,4,4l0,16c0,1.1,0.9,2,2,2h12c1.1,0,2-0.9,2-2V8l-6-6H6z M13,9V3.5L18.5,9H13z" fill="green" />

Simplemente agregué fill = "green" al archivo svg del elemento de ruta, y ahora mi ícono svg se está mostrando en color verde en lugar de negro predeterminado. Sé que algunos de ustedes podrían estar usando una versión diferente de material angular, pero el mecanismo para cambiar el color predeterminado de svg debería aplicarse de la misma manera. Esperemos que esto pueda ser útil para resolver sus problemas, gracias!

Answer 12

Una forma de hacerlo es estableciendo un selector de clase personalizado.

HTML:

<md-button class="md-fab mybtnstyle">
  <md-icon md-svg-src="img/icons/cake.svg"></md-icon>
</md-button>

CSS:

.md-button.md-fab.mybtnstyle {
  background-color: blue;
}

.md-button.md-fab.mybtnstyle:hover {
  background-color: red;
}

Codepen aquí: http://codepen.io/anon/pen/pjxxgx